文章目录
JavaScript 事件
事件
定义:事件是浏览器与用户交换的行为;
onmousemove
定义:鼠标元素移动时触发;
clientX
定义:获取鼠标的水平坐标;
clientY
定义:获取鼠标的垂直坐标;
createElement
定义:创建标签;
appendChild
定义:将创建的标签添加到指定的元素下;
案例
//将创建好的li标签添加到ul下
u1.appendChild(li);
target
定义:表示触发事件的对象;
addEventListener
定义:同时为一个元素的相同事件绑定多个响应函数,当事件被触发时,响应函数将会安装函数的绑定的顺序执行(可以同时为一个元素绑定多个事件)
事件对象
定义:当事件触发时,浏览器每次都传递一个实参进来;
案例
显示当前鼠标坐标位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#areaDiv{
width: 500px;
height: 200px;
border: 1px solid black;
}
#showMsg{
width: 500px;
height: 100px;
margin-top: 30px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload = function(){
/**
* 当属标在areaDiv移动时,在showMsg中显示鼠标的坐标
* **/
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/**
* onmousemove
* 鼠标元素移动时触发
*
* 事件对象
* 当事件触发时,浏览器每次都传递一个实参进来
* **/
areaDiv.onmousemove = function(event){
/**
* clientX可以获取鼠标的水平坐标
* clientY可以获取鼠标的水平坐标垂直
* **/
var x = event.clientX;
var y = event.clientY;
//在showMsg显示坐标
showMsg.innerHTML = "x= " +x + ",y= " +y;
}
}
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg">
</div>
</body>
</html>
运行效果
事件冒泡
定义:当后代元素上的事件触发时,其祖先元素上的事件也会被触发;
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: red;
}
#s1{
background-color: green;
}
</style>
<script type="text/javascript">
window.onload = function(){
/**
* 事件冒泡: (Bubble) 吧bou
* 当后代元素上的事件触发时,其祖先元素上的事件也会被触发
*
*
*
* **/
//为是s1绑定单机响应函数
var s1 = document.getElementById("s1");
s1.onclick = function(event){
event = event || window.event;
alert("s1");
//取消冒泡
event.cancelBubble = true;
};
//为是box1绑定单机响应函数
var box1 = document.getElementById("box1");
box1.onclick = function(){
event = event || window.event;
alert("box1");
//取消冒泡 cancelBubble 取消冒泡事件
event.cancelBubble = true;
};
//为是body绑定单机响应函数
document.body.onclick = function(){
alert("body");
};
};
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">我是一个span</span>
</div>
</body>
</html>
运行效果
事件委派
定义:将事件统一绑定给祖先元素,当后代元素上触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件;
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取ul
var u1 = document.getElementById("u1");
//点击按钮添加超链接
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//创建一个li
var li = document.createElement("li");
li.innerHTML = "<li><a href='javascript:;' class='link'>新建超链接</a></li>"
u1.appendChild(li);
};
/**
* 获取所有a标签,绑定单机响应函数
*
* **/
var allA = document.getElementsByTagName("a");
//遍历
// for(var i=0;i<allA.length;i++){
// allA[i].onclick = function(){
// alert("aaa");
// };
// }
/**
* 事件的委派
* 将事件统一绑定给祖先元素,当后代元素上触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
*
* 只绑定一次事件,即可应用到多个元素上,即使元素是后添加的
* **/
//为ul绑定单机响应函数
u1.onclick = function(event){
event = event || window.event;
//如果触发事件对象是期望的元素执行,否则不执行
/**
* target
* event中的target表示触发事件的对象
* **/
if(event.target.className == "link"){
alert("1111");
}
};
};
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: greenyellow;">
<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>
</html>
运行效果
事件绑定
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
/**
* 点击按钮后弹出内容
* **/
var btn01 = document.getElementById("btn01");
/**
* 使用 对象.事件 = 函数的形式绑定响应函数
* 它只能为一个元素的一个事件绑定一个响应函数
* 不能绑定多个,如果绑定多个,则后边的会覆盖掉前面的
* **/
//绑定第一个响应函数
// btn01.onclick = function(){
// alert("1111");
// };
// //绑定第二个响应函数
// btn01.onclick = function(){
// alert("2222");
// };
/**
* addEventListener()
* 通过这个方法可以为元素绑定响应函数
* 参数:
* 1.事件的字符串,不用on;
* 2.回调函数,当事件触发时该函数会被调用
* 3.是否在捕获阶段触发事件,需要一个bool值,一般都传false
* 使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数,当事件被触发时,响应函数将会安装函数的绑定的顺序执行
* 可以同时绑定多个事件
*
* IE8一下不支持
* **/
btn01.addEventListener("click",function(){
alert("11");
},false);
btn01.addEventListener("click",function(){
alert("22");
},false);
// bind(btn01,"click",function(){
// alert("111");
// });
};
//定义一个函数
/**
* 参数:
* obj 要绑定事件的对象
* eventStr 事件的字符串
* callback 回调函数
* **/
// function bind(obj,eventStr,callback){
// if(obj.addEventListener){
// //大部分浏览器兼容
// obj.addEventListener(eventStr,callback,false);
// }else{
// /**
// * this是由调用方式调用的
// * **/
// //IE8及以下
// obj.attachEvent("on"+eventStr,callback);
// }
//}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>