window.onload = function(){ ???????/* ????????* 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标 ????????*/ ???????//获取两个div ???????var areaDiv = document.getElementById("areaDiv"); ???????var showMsg = document.getElementById("showMsg"); ???????????????/* ????????* onmousemove ????????* ????- 该事件将会在鼠标在元素中移动时被触发 ????????* ?????????* 事件对象 ????????* ????- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数, ????????* ????????在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 ?键盘哪个按键被按下 ?鼠标滚轮滚动的方向。。。 ????????*/ ???????areaDiv.onmousemove = function(event){ ???????????????????????/* ????????????* 在IE8中，响应函数被处罚时，浏览器不会传递事件对象， ????????????* ????在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的 ????????????*/ ???????????/*if(!event){ ???????????????event = window.event; ???????????}*/ ???????????????????????//解决事件对象的兼容性问题 ???????????event = event || window.event; ???????????????????????/* ????????????* clientX可以获取鼠标指针的水平坐标 ????????????* cilentY可以获取鼠标指针的垂直坐标 ????????????*/ ???????????var x = event.clientX; ???????????var y = event.clientY; ???????????????????????//alert("x = "+x + " , y = "+y); ???????????????????????//在showMsg中显示鼠标的坐标 ???????????showMsg.innerHTML = "x = "+x + " , y = "+y; ???????????????????}; ???????????};<style type="text/css"> ???????????#box1{ ???????????????width: 100px; ???????????????height: 100px; ???????????????background-color: red; ???????????????/* ????????????????* 开启box1的绝对定位 ????????????????*/ ???????????????position: absolute; ???????????} ???????????????????</style> ???????????????<script type="text/javascript"> ???????????window.onload = function(){ ???????????????????????????????/* ????????????????* 使div可以跟随鼠标移动 ????????????????*/ ???????????????????????????????//获取box1 ???????????????var box1 = document.getElementById("box1"); ???????????????//绑定鼠标移动事件 ???????????????document.onmousemove = function(event){ ???????????????????????????????????????//解决兼容问题 ???????????????????event = event || window.event; ???????????????????????????????????????//获取滚动条滚动的距离 ???????????????????/* ????????????????????* chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取 ????????????????????* 火狐等浏览器认为浏览器的滚动条是html的， ????????????????????*/ ???????????????????var st = document.body.scrollTop || document.documentElement.scrollTop; ???????????????????var sl = document.body.scrollLeft || document.documentElement.scrollLeft; ???????????????????//var st = document.documentElement.scrollTop; ???????????????????????????????????????????????????????????//获取到鼠标的坐标 ???????????????????/* ????????????????????* clientX和clientY ????????????????????* ????用于获取鼠标在当前的可见窗口的坐标 ????????????????????* div的偏移量，是相对于整个页面的 ????????????????????* ?????????????????????* pageX和pageY可以获取鼠标相对于当前页面的坐标 ????????????????????* ????但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用 ????????????????????*/ ???????????????????var left = event.clientX; ???????????????????var top = event.clientY; ???????????????????????????????????????//设置div的偏移量 ???????????????????box1.style.left = left + sl + "px"; ???????????????????box1.style.top = top + st + "px"; ???????????????????????????????????}; ???????????????????????????????????????????}; ???????????????????????????????</script> ???</head> ???<body style="height: 1000px;width: 2000px;"> ???????<div id="box1"></div> ???</body>window.onload = function(){ ???????????????????????????????/* ????????????????* 事件的冒泡（Bubble） ????????????????* ????- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 ????????????????* ????- 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡 ????????????????* ?????????????????*/ ???????????????????????????????//为s1绑定一个单击响应函数 ???????????????var s1 = document.getElementById("s1"); ???????????????s1.onclick = function(event){ ???????????????????event = event || window.event; ???????????????????alert("我是span的单击响应函数"); ???????????????????????????????????????//取消冒泡 ???????????????????//可以将事件对象的cancelBubble设置为true，即可取消冒泡 ???????????????????event.cancelBubble = true; ???????????????}; ???????????????????????????????//为box1绑定一个单击响应函数 ???????????????var box1 = document.getElementById("box1"); ???????????????box1.onclick = function(event){ ???????????????????event = event || window.event; ???????????????????alert("我是div的单击响应函数"); ???????????????????????????????????????event.cancelBubble = true; ???????????????}; ???????????????????????????????//为body绑定一个单击响应函数 ???????????????document.body.onclick = function(){ ???????????????????alert("我是body的单击响应函数"); ???????????????}; ???????????????????????????????????????????};<body> ???????????????<div id="box1"> ???????????我是box1 ???????????<span id="s1">我是span</span> ???????</div> ???????????</body>事件的委派：
window.onload = function(){ ???????????????????????????????var u1 = document.getElementById("u1"); ???????????????????????????????//点击按钮以后添加超链接 ???????????????var btn01 = document.getElementById("btn01"); ???????????????btn01.onclick = function(){ ???????????????????//创建一个li ???????????????????var li = document.createElement("li"); ???????????????????li.innerHTML = "<a href=‘javascript:;‘ class=‘link‘>新建的超链接</a>"; ???????????????????????????????????????//将li添加到ul中 ???????????????????u1.appendChild(li); ???????????????}; ???????????????????????????????????????????????/* ????????????????* 为每一个超链接都绑定一个单击响应函数 ????????????????* 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦， ????????????????* ????而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定 ????????????????*/ ???????????????//获取所有的a ???????????????var allA = document.getElementsByTagName("a"); ???????????????//遍历 ???????????????/*for(var i=0 ; i<allA.length ; i++){ ???????????????????allA[i].onclick = function(){ ???????????????????????alert("我是a的单击响应函数！！！"); ???????????????????}; ???????????????}*/ ???????????????????????????????/* ????????????????* 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的 ????????????????* 我们可以尝试将其绑定给元素的共同的祖先元素 ????????????????* ?????????????????* 事件的委派 ????????????????* ????- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素 ????????????????* ????????从而通过祖先元素的响应函数来处理事件。 ????????????????* ?- 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 ????????????????*/ ???????????????????????????????//为ul绑定一个单击响应函数 ???????????????u1.onclick = function(event){ ???????????????????event = event || window.event; ???????????????????????????????????????/* ????????????????????* target ????????????????????* ????- event中的target表示的触发事件的对象 ????????????????????*/ ???????????????????//alert(event.target); ???????????????????????????????????????????????????????????//如果触发事件的对象是我们期望的元素，则执行否则不执行 ???????????????????if(event.target.className == "link"){ ???????????????????????alert("我是ul的单击响应函数"); ???????????????????} ???????????????????????????????????}; ???????????????????????????}; ???????????????????</script> ???<body> ???????<button id="btn01">添加超链接</button> ???????????????<ul id="u1" style="background-color: #bfa;"> ???????????<li> ???????????????<p>我是p元素</p> ???????????</li> ???????????<li><a href="javascript:;" class="link">超链接一</a></li> ???????????<li><a href="javascript:;" class="link">超链接二</a></li> ???????????<li><a href="javascript:;" class="link">超链接三</a></li> ???????</ul> ???????????</body>事件的绑定：
/* ????????????????* 使用 对象.事件 = 函数 的形式绑定响应函数， ????????????????* ????它只能同时为一个元素的一个事件绑定一个响应函数， ????????????????* ????不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的 ????????????????*/ /* ????????????????* addEventListener() ????????????????* ????- 通过这个方法也可以为元素绑定响应函数 ????????????????* ?- 参数： ????????????????* ????????1.事件的字符串，不要on ????????????????* ????????2.回调函数，当事件触发时该函数会被调用 ????????????????* ????????3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false ????????????????* ?????????????????* 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数， ????????????????* ????这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 ????????????????* ?????????????????* 这个方法不支持IE8及以下的浏览器 ????????????????*/ btn01.addEventListener("click",function(){ ???????????????????alert(1); ???????????????},false); ???????????????????????????????btn01.addEventListener("click",function(){ ???????????????????alert(2); ???????????????},false); /* ????????????????* attachEvent() ????????????????* ????- 在IE8中可以使用attachEvent()来绑定事件 ????????????????* ?- 参数： ????????????????* ????????1.事件的字符串，要on ????????????????* ????????2.回调函数 ????????????????* ?????????????????* ?- 这个方法也可以同时为一个事件绑定多个处理函数， ????????????????* ????????不同的是它是后绑定先执行，执行顺序和addEventListener()相反 ????????????????*/ btn01.attachEvent("onclick",function(){ ???????????????????alert(1); ???????????????}); ???????????????????????????????btn01.attachEvent("onclick",function(){ ???????????????????alert(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{ ???????????????????/* ????????????????????* this是谁由调用方式决定 ????????????????????* callback.call(obj) ????????????????????*/ ???????????????????//IE8及以下 ???????????????????obj.attachEvent("on"+eventStr , function(){ ???????????????????????//在匿名函数中调用回调函数 ???????????????????????callback.call(obj); ???????????????????}); ???????????????} ???????????}bind(btn01 , "click" , function(){ ???????????????????alert(this); ???????????????});事件的传播：
/* ????????????????* 事件的传播 ????????????????* ????- 关于事件的传播网景公司和微软公司有不同的理解 ????????????????* ????- 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件， ????????????????* ????????然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。 ????????????????* ?- 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件， ????????????????* ????????然后在向内传播给后代元素 ????????????????* ????- W3C综合了两个公司的方案，将事件传播分成了三个阶段 ????????????????* ????????1.捕获阶段 ????????????????* ????????????- 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件 ????????????????* ????????2.目标阶段 ????????????????* ????????????- 事件捕获到目标元素，捕获结束开始在目标元素上触发事件 ????????????????* ????????3.冒泡阶段 ????????????????* ????????????- 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 ????????????????* ?????????????????* ????????- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true ????????????????* ????????????一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false ????????????????* ?????????????????* ????- IE8及以下的浏览器中没有捕获阶段 ????????????????*/
js基础（事件）
原文地址：https://www.cnblogs.com/lzb0803/p/9030021.html