JavaScript日记（十一）

Tmil

已于 2022-10-30 16:27:44 修改

阅读量539

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2022-05-02 20:33:55 首次发布

本文链接：https://blog.csdn.net/qq_46067727/article/details/124546136

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

事件对象：

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息（例如：鼠标的坐标、按下键盘按键、鼠标滚轮滚动方向）。在IE8中，响应函数被触发时，浏览器不会传递该对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

//为防止浏览器不兼容，可以在程序中做出判断
div.onmousemove=function(event){
    event=event || window.event;  //“||”符号在判断时，如果浏览器兼容第一个则判定为true，语句终止，event=event；如果不兼容第一个，则继续判断，判断为true则event=window.event
    var x=event.clientX;  //获取鼠标的水平坐标
}

onmousemove，该事件会在鼠标在元素中移动时被触发

clientX，clientY可以获取鼠标指针的水平和垂直坐标

事件的冒泡：

指事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡（将事件对象的cancelBubble设置为true）

事件的委派（利用冒泡）：

如果希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素共同的祖先元素。事件的委派指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。通过委派可以减少事件绑定的次数，提高程序的性能

event中的target表示触发事件的对象

事件的绑定：

使用对象.事件=函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个则后边会覆盖掉前边的

addEventListener()，此方法可以为一个元素的相同事件同时绑定多个响应函数，当事件被触发时，响应函数会按照函数的绑定顺序执行。参数1：事件的字符串，不要on（onClick事件只写click）；参数2：回调函数，当事件触发时该函数会被调用；参数3：是否在捕获阶段触发事件，需要一个布尔值，一般都传false。此方法不支持IE8及以下版本浏览器

button.addEventListener("click",function(){alert(1);},false);
button.addEventListener("click",function(){alert(2);},false);
//弹出框先后弹出1,2

在IE8中可以使用attachEvent()，此方法也可以同时为一个事件绑定多个处理函数，不同的是它的执行顺序与addEventListener()相反，后绑定先执行。参数1：事件的字符串，要on；参数2：回调函数

addEventListener()中的this是绑定事件的对象，attachEvent()中的this是window

定义一个函数，用来为指定元素绑定响应函数，需要统一两个方法this

/*
参数:
obj 要绑定事件的对象
eventstr 事件的字符串（不要on）
callback 回调函数
*/
function bind(obj,eventstr,callback){
    if(obj.addEventListener){
        obj.addEventListener(eventstr,callback,false);
    }else{
        obj.attachEvent(“on”+eventstr,function(){callback.call(obj);});
    }
}