事件对象的简介

目录

事件对象

例：

window.onload = function(){
//当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
//获取两个div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg") ;
/*
* onmousemove
*该事件将会在鼠标在元素中移动时被触发
*/
areaDiv.onmousemove = function(){
//在showMsg中显示鼠的坐标
};
};

事件对象

  • 当事件的响应函数被触发时，浏览器每次都会将一个事 件对象作为实参传递进响应函数，
    在事件对象中封装了当前事件相关的一切信息，比如: 鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向

clientX 可以获取鼠标指针的水平坐标
cilentY 可以获取鼠标指针的垂直坐标

var X = event.clientX;
var y = event.clientY;

在IE8中，响应函数被处罚时，浏览器不会传递事件对象，
在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

if(!event){
    event = window.event ;
}
//解决兼容问题
//event = event||windows.event;

例：设计元素跟随鼠标移动

//获取box1
var box1 = document.getElementById("box1");
//绑定鼠标移动事件
document.onmousemove = function(event){
//解决兼容问题
event = event|| window. event;
//获取到鼠标的坐标
/*
clientX和clientY
用于获取鼠标在当前的可见窗口的坐标
div的偏移量，是相对于整个页面的
pageX和pageY可以获取鼠标
*/
var left = event.pageX;
var top = event.pageY;
//设置div的偏移量
box1.style.left = left + "px";
box1.style.top = top + "px" ;

pageX和pageY可以获取鼠标相对于当前页面的坐标
但是这个两个属性在IE8中不支持，所以如果需要兼容IE8,则不要使用

chrome认为浏览器的滚动条是body的，可以通过body . scrollTop来获取
火狐等浏览器认为浏览器的滚动条是html的，

var st = document.body.rollTop||document.documentElement.scrollTop;
var sl = document.body.scrollLeft||document.ocumentElement.scrollLeft;

事件的冒泡

事件的冒泡( Bubble)

  • 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
  • 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
//为s1绑定-一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function(){
alert("我是span的单击响应函数");
};
//为box1绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function(){
alert("我是diV的单击响应函数");
};
//为body绑定一个单击响应函数
document.body.onclick = function(){
alert("我是body的单击响应函数");
};

取消冒泡
可以将事件对象的cancelBubble设置为true,即可取消冒泡

event.cancelBubble = true;

事件的委派

只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
我们可以尝试将其绑定给元素的共同的祖先元素

  • 指将事件统一 绑定给元素的共同的祖先元素， 这样当后代元素上的事件触发时， 会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

<head>
    <script type="text/javascript">
        window.onload = function(){
//点击按钮以后添加超链接
var btn01 = document.getElementById("btn01" );
btn01.onclick = function(){
//创建一个li
var li = document. createElement("1i");
li.innerHTML = "<a href='javascript:; '>超链接</a>";
//将1i添加到u1中
u1.appendChild(1i);
}
         
//为每一个超链接都绑定一个单击响应函数
//获取所有的a
var allA = document.getElementsByTagName("a");
//遍历
for(var i=0 ; i<allA.length ; i++){
allA[i].onclick = function( ){
alert( "我是a的单击响应函数! ! ! ");
};
}
            
//为u1绑定一个单击响应函数
u1.onclick = function( ){
    //如果触发事件的对象是我们期望的元素，则执行否则不执行
    //event中的target表示的触发事件的对象
alert( "我是u1的单击响应函数") ;
    
/*如果触发事件的对象是我们期望的元素，则执行否则不执行
if(event.target.className == "link"){
alert( "我是u1的单击响应函数");
*/
};

};

</script>
</head>
<body>
    <button id= "btn01">添加超链接</button>

    <ul id="u1">
        <li><a href= "javascript:;">超链接1</a></li>
        <li><a href= "javascript:;">超链接2</a></li>
        <1i><a href= "javascript:;">超链接3</a></li>
</ul>

</body>

事件的绑定

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

addEventListener( )
通过这个方法也可以为元素绑定响应函数

  • 参数:
    1.事件的字符串，不要on
    2.回调函数，当事件触发时该函数会被调用
    3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

attachEvent( )
在IE8中可以使用attachEvent( )来绑定事件

  • 参数:
    1.事件的字符串，要on
    2.回调函数

这个方法也可以同时为一个事件绑定多个处理函数，
不同的是它是后绑定先执行，执行顺序和addEventListener( )相反

定义一个函数，用来为指定元素绑定响应函数

  • 参数:
    obj 要绑定事件的对象
    eventStr 事件的字符串
    callback 回调函数
function bind(obj，eventStr，callback){
}

大部分浏览器兼容的方式

obj.addEvent Listener(eventStr,callback,false) ;

IE8及以下

obj.attachEvent("on"+leventStr,callback);

事件的传播

  • 关于事件的传播网景公司和微软公司有不同的理解

  • 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
    然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

  • 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素

  • W3C综合了两个公司的方案，将事件传播分成了三个阶段
    1.捕获阶段
    在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
    2.目标阶段
    事件捕获到目标元素，捕获结束开始在目标元素上触发事件
    3.冒泡阶段
    事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener( )的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

  • IE8及以下的浏览器中没有捕获阶段

posted @ 2022-02-07 22:42  苏槿年  阅读(52)  评论(0)    收藏  举报