function alertSecond() {
alert("第2次");
}
function changeColor() {
if (this.style.color == "red") {
this.style.color = "black";
}
else {
this.style.color = "red";
}
}
function changeBackgroundColor() {
console.log(this.textContent);
if (this.style.backgroundColor == "lightskyblue") {
this.style.backgroundColor = "white";
}
else {
this.style.backgroundColor = "lightskyblue";
}
}
function changeColorAndBackgroundColor() {
if (this.style.color == "red") {
this.style.color = "black";
}
else {
this.style.color = "red";
}
if (this.style.backgroundColor == "lightskyblue") {
this.style.backgroundColor = "white";
}
else {
this.style.backgroundColor = "lightskyblue";
}
}
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
alert("第1次");
};
oBtn.onclick = function () {
alert("第2次");
};
oBtn.onclick = function () {
alert("第3次");
};
function changeColor(){
if(this.style.color=="red"){
this.style.color="black";
}
else{
this.style.color="red";
}
}
var oBtn1 = document.getElementById("listenBtn");
oBtn1.addEventListener("click",function(){
alert("第1次");
},false);
oBtn1.addEventListener("click",alertSecond,false);
//oBtn1.removeEventListener("click",alertSecond,false);
var oPContent=document.getElementById("content");
oPContent.addEventListener("click",changeColor,false);
oPContent.addEventListener("click",changeBackgroundColor,false);
var oBtn=document.getElementById("removeBtn");
oBtn.addEventListener("click",function(){
oPContent.removeEventListener("click",changeColor,false);
},false);
var oPContent1=document.getElementById("content1");
//oPContent1.onclick=changeColor;
oPContent1.onclick = changeBackgroundColor;
//oPContent1.onclick = changeColorAndBackgroundColor;
var oBtn1=document.getElementById("removeBtn1");
oBtn1.addEventListener("click",function(){
oPContent1.onclick=null;
},false);
oBtn1.addEventListener("click",function(event){
alert(event.type);
oPContent1.onclick=null;
});
//形参不用定义var，声明变量才用
//JavaScript 允许重复声明变量，后声明赋值的覆盖之前的
//onclick也有他的局限性，就是它只能绑定一个事件，当有多个事件会在一次点击时发生，那么onclick就不能完成任务
document.addEventListener("keydown",function(event){
console.log(event.type);
if(event.shiftKey||event.altKey||event.ctrlKey){
console.log("你按下了shift,all或者ctrl");
}
console.log("按下的按键"+event.keyCode);
});
//事件冒泡、事件捕获
//false是默认值，可以不写
document.addEventListener("keyup",function(event){
console.log(event.type);
console.log("松开按键"+event.keyCode);
console.log("------------");
});
//this:哪个dom对象（元素节点）调用了this所在的函数，那么this指向的就是哪个dom对象
/*
1、捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)
2、冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡
两种方式来阻止事件冒泡。
方式一：event.stopPropagation();
方式二：return false;
这两种方式是有区别的：
return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。
event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
*/
//1、点击文字welcome时，弹出hello。（先查找welcome文本节点是否有绑定事件，没有，查找父节点div，有绑定事件，执行）
//2、点击文字hello时，先弹出world，再弹出hello。（先查找hello文本节点是否有绑定事件，有，执行事件，再查找父节点div，有绑定事件，执行）
//3、点击world时，弹出hello。（先查找world文本节点是否有绑定事件，没有，查找父节点div，有绑定事件，执行）
var obj1=document.getElementById('obj1');
var obj2=document.getElementById('obj2');
obj1.addEventListener('click',function(){
alert('hello');
},false);
obj2.addEventListener('click',function(){
alert('world');
})
//事件代理机制（事件委托）：基于事件冒泡
/*点击每个h5标签时，弹出对应的innerHTML 。
常规做法是遍历每个h5,然后在每个h5上绑定一个点击事件，这种做法在h5较少的时候可以使用
但如果有一万个h5，那就会导致性能降低。这时就需要事件代理出场了
由于事件冒泡机制，点击了h5后会冒泡到div,此时就会触发绑定在div上的点击事件
再利用target找到事件实际发生的元素，就可以达到预期的效果
*/
// obj1.addEventListener('click',function(e){
// var e=e||window.event;
// if(e.target.nodeName.toLowerCase()=='h5'){
// alert(e.target.innerHTML);
// }
// },false);
/*
事件委托好处：
（1）可以大量节省内存占用，减少事件注册，比如在父元素ul上代理所有子元素li的click事件就非常棒
（2）可以实现当新增子对象时无需再次对其绑定（动态绑定事件）
事件委托不足：
使用“事件委托”时，并不是说把事件委托给的元素越靠近顶层就越好。
事件冒泡的过程也需要耗时，越靠近顶层，事件的”事件传播链”越长，
也就越耗时。如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失。
*/
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
//传统：
// item1.onclick = function() {
// location.href = "https://blog.csdn.net/qq_38128179/article/details/86293394";
// };
// item2.onclick = function() {
// document.title = "事件委托";
// };
// item3.onclick = function() {
// alert("hi");
// };
//事件委托：
// document.addEventListener("click", function (event) {
// var target = event.target;
// switch (target.id) {
// case "doSomething":
// document.title = "事件委托";
// break;
// case "goSomewhere":
// //双击才会跳转
// location.href = "https://blog.csdn.net/qq_38128179/article/details/86293394";
// break;
// case "sayHi": alert("hi");
// break;
// }
// })
/*
jQuery事件delegate()实现事件委托
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
格式：$(selector).delegate(childSelector, event, data, function)
*/
// $(document).ready(function () {
// $("#myLinks").delegate("#goSomewhere", "click", function () {
// location.href = "http://www.baidu.com";
// });
// });
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/jquery1.9.1/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="js/jqueryStudy.js" ></script>
<title></title>
<script>
</script>
</head>
<body>
<input id="btn" type="button" value="按钮"/>
<br/>
<input id="listenBtn" type="button" value="事件监听器"/>
<br/>
<div>
<p id="content">广州新华学院</p>
<button id="removeBtn">解除</button>
</div>
<div>
<p id="content1">信息科学学院</p>
<button id="removeBtn1">解除</button>
</div>
<br/>
<br/>
<div id="obj1">
welcome
<h5 id="obj2">hello</h5>
<h5 id="obj3">world</h5>
</div>
<br/>
<br/>
<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
</body>
</html>