发表于： 2020-09-14 23:52:41
0 1409
今天完成的事情：
看视频学习事件的委托，冒泡，绑定，传播
window.onload = function () {
/*
事件的冒泡(Bubble)
-所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
可以通过事件对象取消
*/
// 为s1绑定一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function () {
event = event || window.event;
alert("我是span的单击响应函数");
// 取消冒泡
// 可以将事件对象的cancelBubble设置为true
event.cancelBubble = true;
};
// 为box1绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function () {
alert("我是div的单击响应函数");
event.cancelBubble = true;
};
// 为body绑定一个单击响应函数
document.body.onclick = function () {
alert("我是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添加到u1中
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 || window.event;
/*
target
-event中的target表示的触发事件的对象
*/
// alert(event.target);
// 如果触发事件的对象事是我们期望的元素，则执行，否则不执行
if (event.target.className == "link"){
alert("我是ul的单击响应函数");
}
};
};
window.onload = function () {
/*
点击按钮弹出一个内容
*/
// 获取按钮对象
var btn01 = document.getElementById("btn01");
/*
使用 对象.事件 = 函数 的形式绑定响应函数
它只能同时为一个元素的事件绑定一个响应函数
绑定多个，则会覆盖
*/
/*
// 为btn01绑定一个单击响应函数
btn01.onclick=function(){
alert(1);
};
// 为btn01绑定第二个单击响应函数
btn01.onclick=function(){
alert(2);
};
*/
/*
addEventListener()
参数：
1.事件的字符串，不要on
2.回调函数，当前事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数
这样当事件被触发时，响应函数将会按照函数的绑定属性执行
不兼容ie8
*/
btn01.addEventListener("click", function () {
alert(1);
}, false);
btn01.addEventListener("click", function () {
alert(2);
}, false);
btn01.addEventListener("click", function () {
alert(3);
}, false);
// /*
// attachEvent()
// 参数：
// 1.事件的字符串，要on
// 2.回调函数
// */
// btn01.attachEvent("onclick", function () {
// alert(1);
// });
// btn01.attachEvent("onclick", function () {
// alert(2);
// });
// btn01.attachEvent("onclick", function () {
// alert(3);
// });
// 定义一个函数，用来为指定元素绑定响应函数
/*
addEventListener()中的this，是绑定事件的对象
*/
/*
参数：
obj 要绑定事件的对象
eventStr 事件的字符串
callback 回调函数
*/
function bind(obj, eventStr, callback) {
}
};
<script>
window.onload = function () {
/*
分别为三个div绑定单击响应函数
*/
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
// 事件的传播
bind(box1,"click",function(){
alert("我是box1的响应函数");
});
bind(box2,"click",function(){
alert("我是box2的响应函数");
});
bind(box3,"click",function(){
alert("我是box3的响应函数");
});
};
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);
});
}
}
返回列表
评论