今天完成的事情：
1.如何阻止冒泡时间和默认事件
事件冒泡：html元素是嵌套结构，在触发内层元素的事件时，外部事件也会被由内到外触发，这种现象叫做事件冒泡
冒泡事件通俗来讲，就是儿子传话给父亲，父亲传话给爷爷，即子元素—>父元素—>祖先元素
阻止冒泡事件： e.stopPropagation();
window.onload = function () {
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function (ev) {
var oEvent = ev || event;
box.style.display = 'block';
//oEvent.cancelBubble = true;//高版本浏览器
stopBubble(oEvent);
}
document.onclick = function () {
box.style.display = 'none';
}
}
//阻止冒泡事件的兼容性处理
function stopBubble(e) {
if (e && e.stopPropagation) { //非IE
e.stopPropagation();
} else { //IE
window.event.cancelBubble = true;
}
}
默认事件： a标签的跳转事件就是默认事件
阻止默认事件： e.preventDefault();
function preventDefa(e) {
if (window.event) {
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
else {
//阻止默认浏览器动作
e.preventDefault();
}
}
冒泡事件与捕获事件的区别
冒泡事件与捕获事件相反，即祖先元素-父元素-子元素
冒泡事件与捕获事件的区别
冒泡事件与捕获事件相反，即祖先元素-父元素-子元素
2.简述JS中的event delegate
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件
使用情景：
为DOM中的很多元素绑定相同事件；为DOM中尚不存在的元素绑定事件；
事件委托的优点：
1.可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件
2.可以实现当新增子对象时无需再次对其绑定（动态绑定事件）
js原生
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
<script>
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
document.addEventListener("click", function (event) {
var target = event.target;
switch (target.id) {
case "doSomething":
document.title = "事件委托";
break;
case "goSomewhere":
location.href = "http://www.baidu.com";
break;
case "sayHi": alert("hi");
break;
}
})
jquery
格式：$(selector).delegate(childSelector, event, data, function) (data，规定传递到函数的额外数据，可选)
例如：任务4判断杀人或投票后添加下一天的事件，绑定父元素main1，添加子元素事件
$('.main1').on("click", ".word1", function () {
if (fsm.state === 'step1') {
toKilling();
$(this).css('background-color', '#83b09a');
$(this).css('pointer-events', 'none');
}
fsm.pro1();
});
$('.main1').on("click", ".word2", function () {
if (fsm.state === 'step2') {
confirm('请死者亮明身份发表遗言！')
$(this).css('background-color', '#83b09a');
}
fsm.pro2();
});
$('.main1').on("click", ".word3", function () {
if (fsm.state == 'step3') {
confirm("玩家依次讨论！");
$(this).css('background-color', '#83b09a');
}
fsm.pro3();
});
// 投票
$('.main1').on("click", ".word4", function () {
if (fsm.state === 'step4') {
toVoting();
$(this).css('background-color', '#83b09a');
var totalday = $('.day-num').length - 1;
console.log(totalday);
$('.process-box').eq(totalday).css('display', 'none');
$('.today').eq(totalday).click(function () {
$('.process-box').eq(totalday).toggle();
});
}
fsm.pro4();
});
返回列表
评论