js事件（包含call()方法使用特点）

1、焦点事件

　　　获取焦点事件onfocus\失去焦点事件onblur

　　　例：　oText.onfocus=function(){}

　　　焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么它就可以接受用户的输入

　　可以通过这些方式来给元素设置焦点

　　　　1、点击 2、tab 3、js

　　　　不是所有元素都能够接收焦点，能够相应用户操作的能够与用户交互的元素才有焦点

　　元素.focus()：给指定元素设置焦点，该事件不会冒泡

　　元素.blur():取消指定元素的焦点，该事件不会冒泡。除了获取焦点和取消焦点的事件不会冒泡，其他的表单元素会冒泡

　　元素.select():选择指定元素里面的文本内容，只能选取可交互性里面的内容，像div标签里的内容是获取不到的。

　　例：oText.select();全选文本框中的内容

2、Event对象

　　用来获取事件的详细信息：鼠标位置、键盘按键

　　event：事件对象，当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定的地方 ---event对象，供我们在需要的时候调用。

　　事件函数：事件调用的函数，一个函数是不是事件函数，不在定义时候决定，而是取决于这个调用的时候

　　Event对象兼容： IE/chrome：event是一个内置全局对象

　　　　　　　　　　　　标准下：事件对象是通过事件函数的第一个参数传入的

　　解决兼容性问题：var ev=事件函数参数 || event 　（ev=ev||window.event）

　　如果一个函数是被事件调用的，那么这个函数定义的第一个参数就是事件对象

　　Event对象下获取鼠标位置：clientX clientY //获取的是可视区的相对顶部top，和相对left的距离

　　　　onmousemove:当鼠标在一个元素上移动的时候触发，触发的频率不是像素，而是时间间隔，在一个指定的时间内（很短），如果鼠标的位置和上一次的位置对比发生变化，那么就会触发一次。

　　方块跟着鼠标移动例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    window.onload=function () {

       var oDiv=document.getElementById('div1');

        document.onmousemove=function (ev) {

            var ev=ev||event;

            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意要获取滚动条向下移动的距离

            oDiv.style.left=ev.clientX+'px';

            oDiv.style.top=scrollTop+ev.clientY+'px';

        }

    }

</script>

    <div id="div1" style="width: 100px;height: 100px;background-color: #ff6471;position: absolute"></div>

</body>

</html>

　3、事件流

　　事件冒泡：当一个元素接收到一个事件的时候，会把他接收到的所有传播给他的父级一直到顶层window。默认情况下都会都冒泡行为。

　　阻止冒泡：当前要阻止冒泡的事件函数中调用event.cancelBubble=true；

　　　　除了获取焦点和取消焦点的事件不会冒泡，其他的表单元素会冒泡。IE定义了focusin和focusout事件可以冒泡，来替代fucus和blur事件

　　元素.onclick=fn1;fn1为函数给这个元素加事件，给元素加事件处理函数。（事件函数的绑定）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件冒泡</title>

    <style>

        div{

            padding: 40px;

        }

        #div1{

            background: #5cff69;

        }

        #div2{

            background: #5fccff;

        }

        #div3{

            background: #ff6471;

        }

    </style>

</head>

<body>

    <script>

        window.onload=function () {

            var oDiv1=document.getElementById('div1');

            var oDiv2=document.getElementById('div2');

            var oDiv3=document.getElementById('div3');

        function fn1() {

            alert(this.id);

        }

            //事件函数绑定--------执行结果：div3 div2 div1  事件的冒泡

            oDiv1.onclick=fn1;

            oDiv2.onclick=fn1;

            oDiv3.onclick=fn1;

        }

    </script>

    <div id="div1">

        <div id="div2">

            <div id="div3"></div>

        </div>

    </div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件冒泡</title>

    <style>

        #div1{

            width: 100px;

            height: 200px;

            background: red;

            position: absolute;

            left:-100px;

            top: 100px;

        }

        #div2{

            width: 30px;

            height: 60px;

            position: absolute;

            top: 70px;

            right: -30px;

            background: black;

            color: white;

            text-align: center;

        }

    </style>

</head>

<body>

    <script>

        window.onload=function () {

            var oDiv=document.getElementById('div1');

            oDiv.onmouseover=function () {

                this.style.left='0px';

            }

            oDiv.onmouseout=function () {

                this.style.left='-100px';

            }

        }

    </script>

    <div id="div1">

        <div id="div2">

            分享到

        </div>

    </div>

</body>

</html>

事件捕获：

　　IE下是没有的，在绑定事件中，标准下是有的

　　1、给对象绑定一个事件处理函数的第一种形式------obj.onclick=fn;属于赋值形式，后面的赋值会覆盖前面的赋值

   <script>

        function fn1() {

            alert(1);

        }

        function fn2() {

            alert(2);

        }

        document.onclick=fn1;

        document.onclick=fn2;

        //结果只显示2，会覆盖前面绑定的fn1

    </script>

　 2、给一个元素绑定事件函数的第二种形式 ------给对象的同一个事件绑定多个不同的函数

　　兼容性问题：

　　　　IE：obj.attachEvent(事件名称，事件函数);

　　　　　　1、没有捕获

　　　　　　2、事件名称有on

　　　　　　3、事件函数执行顺序：标准下->正序非标准下->倒序

　　　　　　4、this指向window

　　函数调用方法：fn1()==fn1.call();call函数最大的特点是可以传参：call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法第二个参数开始就是原来函数的参数列表。如果第一个参数传入的是null，则指向之前默认的对象。

　　可以通过: 事件函数.call(obj);来改变this指向问题

<script>

function fn1() {

            alert(1);

        }

        function fn2() {

            alert(2);

        }

        document.attachEvent('onclick',fn1());

        document.attachEvent('onclick',fn2());

</script>

　　我执行结果是：只能弹出1

　　　　标准下：obj.addEventListener(事件名称，事件函数，是否捕获);//是否捕获：默认是false false：冒泡（从下到上） true：捕获（从上到下）

　　　　　　1、有捕获

　　　　　　2、事件名称没有on

　　　　　　3、事件函数执行顺序正序

　　　　　　4、this指向触发该事件的对象

　　解决绑定事件的兼容性问题方法：　可以实现多个函数绑定，正确的this指向

　　　　function bind(obj,evname,fn){

　　　　　　　　if(obj.addEventListener){

　　　　　　　　　　obj.addEventListener(evname,fn,false);

　　　　　　　　}else{

　　　　　　　　　　obj.attachEvent('on'+evname,function(){

　　　　　　　　　　　　fn.call(obj);

　　　　　　　　　　});

　　　　　　　　}

　　　　bind(document,'click',fn1);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件冒泡与捕获</title>

    <style>

        div{

            padding: 40px;

        }

        #div1{

            background: #5cff69;

        }

        #div2{

            background: #5fccff;

        }

        #div3{

            background: #ff6471;

        }

    </style>

</head>

<body>

    <script>

        window.onload=function () {

            var oDiv1=document.getElementById('div1');

            var oDiv2=document.getElementById('div2');

            var oDiv3=document.getElementById('div3');

        function fn1() {

            alert(this.id);

        }

            //事件函数绑定--------执行结果：div3 div2 div1  事件的冒泡

//            oDiv1.onclick=fn1;

//            oDiv2.onclick=fn1;

//            oDiv3.onclick=fn1;

            //true表示是捕获

//            oDiv1.addEventListener('click',fn1,true);

//            oDiv2.addEventListener('click',fn1,true);

//            oDiv3.addEventListener('click',fn1,true);

//            //执行结果：div1 div2 div3

            //false表示是冒泡

            oDiv1.addEventListener('click',fn1,false);

            oDiv2.addEventListener('click',fn1,false);

            oDiv3.addEventListener('click',fn1,false);

            //执行结果是 ：div3 div2 div1

        }

    </script>

    <div id="div1">

        <div id="div2">

            <div id="div3"></div>

        </div>

    </div>

</body>

</html>

　　1、第一种事件绑定形式的取消

　　　　　　document.onclick=null;

　　2、第二种事件绑定形式取消

　　　　IE：obj.detachEvent(事件名称，事件函数)；例：document.detachEvent('onclick',fn1);

　　　　标准：obj.removeEvenListener(事件名称，事件函数，是否捕获)；

4、键盘事件：

　　onkeydown:当键盘按键按下的时候触发,如果按下不抬起，那么会连续触发，但是会有一个问题，连续触发的开始会稍微停顿一下，会有一个时间间隔。可以通过定时器来解决。

　　　　　　　　oText.onkeydown=function(){alert(this.value);//弹出的是上一次输入后的内容}

　　　　　　　　oText.onkeyup=function(){alert(this.value);//弹出的是本次输入的内容}

　　onkeyup:当键盘抬起的时候触发

　　event.keyCode:　数字类型键盘按键的值键值　

　　　　ctrlKey,shiftKey,altKey 布尔值 ------当一个事件发生的时候，如果ctrl||shift||alt 键是按下的状态，返回true，否则返回false

　　并不是所有元素都能够接收键盘事件，能够相应用户输入的元素，能够接收焦点的元素就能够接受键盘事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>键盘事件(留言本  键盘控制方块移动)</title>

</head>

<body>

    <script>

//        window.onkeydown=function () {

//            var ev=ev||event;

//            alert(ev.keyCode)

//

//        }

//        document.onclick=function (ev) {

//            var ev=ev||event;

//            alert(ev.ctrlKey);

//        }

    window.onload=function () {

        var oText=document.getElementById('text1');

        var oUl=document.getElementById('ul1');

        oText.onkeyup=function (ev) {

            var ev = ev || event;

            if (this.value != '') {

                if (ev.keyCode == 13) {   //按回车键发送  如果要想按ctrl+回车一起需要if(ev.keyCode==13&& ctrlKey)

                    var oLi = document.createElement('li');

                    oLi.innerHTML = this.value;

                    if (oUl.children[0]) {

                        oUl.insertBefore(oLi, oUl.children[0])

                    } else {

                        oUl.appendChild(oLi);

                    }

                }

            }

        }

         var oDiv=document.getElementById('div1');

        document.onkeydown=function (ev) {

            var ev=ev||event;

            switch (ev.keyCode){

                case 37:

                    oDiv.style.left=oDiv.offsetLeft-10+'px';

                    break;

                case 38:

                    oDiv.style.top=oDiv.offsetTop-10+'px';

                    break;

                case 39:

                    oDiv.style.left=oDiv.offsetLeft+10+'px';

                    break;

                case 40:

                    oDiv.style.top=oDiv.offsetTop+10+'px';

                    break;

            }

        }

    }

    </script>

    <input type="text" id="text1">

    <ul id="ul1"></ul>

    <div id="div1" style="width: 100px;height: 100px;background-color: #ff6471;position: absolute"></div>

</body>

</html>

5、鼠标事件

　　对于click事件，detail属性指定了其是否是单击，双击，还是三击

6、阻止事件默认行为办法：

　　　当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false

　　　oncontextmemu:右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发

巴特西

js事件（包含call()方法使用特点）

最新文章

热门文章

巴特西

js事件 （包含call()方法使用特点）

最新文章

热门文章

js事件（包含call()方法使用特点）