事件
用户的行为：onclick、ondblclick、onfocus、onblur、window.onload
是用户跟页面的交互，当用户跟页面进行一些“交流”的时候，页面通过js就会触发一些事件，比如鼠标点击的时候就会触发onclick事件，给这个事件绑定一个函数，那么这个时候函数就会被调用，代码就会被执行。
事件类型：
鼠标事件：click，dbclick，mousedown，mouseup，mouseover，
mouseout，mouseenter（鼠标穿过元素）、mouseleave（鼠标离开元素）、
mousemove、scroll（适用于所有可以滚动的元素和window对象）、mousewheel
鼠标滚轮、contextmenu 鼠标右键（上下文菜单：在不同环境下右键菜单不一样）
其中
mouseover：鼠标在元素身上移动穿过子元素的时候会被反复触发
mouseenter：只是在进入元素的时候触发
键盘事件：keydown，keyup，keypress
事件举例:
<div id="box">box</div>
<script>
var box = document.getElementById("box");
//绑定事件
box.onclick = function(){
alert("click");
}
function foo(){
alert("foo");
}
box.onmouseover = foo;
</script>
表单事件：对表单元素操作之后会触发的事件
单选框、多选框、下拉菜单 状态改变的时候会触发 onchange 事件。
表单提交的时候会触发 onsubmit 触发在<form>元素身上。
表单事件举例:
<form id="form">
<input type="text" id="num">
<select id="sel">
<option>成都</option>
<option>北京</option>
<option>上海</option>
</select>
<input type="checkbox" id="check">
<button type="button">按钮</button>
<input type="submit" value="提交" id="btn">
</form>
<script>
var input = document.getElementById("num");
input.onfocus = function(){
console.log("获得焦点");
}
input.onblur = function(){
console.log("失去焦点");
//console.log(input.value);
var value = this.value;
//是否大于6位
if(value.length > 6){
console.log("满足要求");
}else{
console.log("请输入大于6位");
}
}
var sel = document.getElementById("sel");
//重新选择的时候,触发onchange事件
sel.onchange = function(){
console.log(this.value);
}
var check = document.getElementById("check");
check.onchange = function(){
console.log(this.checked); //是否选中的状态(true\false)
}
var form = document.getElementById('form');
console.log(btn);
form.onsubmit = function(e){
//表单提交事件
console.log("提交");
e.preventDefault();
return false;
}
</script>
this关键字:事件函数里面的this指的是事件触发对象。
事件的原理和hover类似。可以做到:hover做不到的事，:hover只能操作当前的元素，但是事件绑定之后可以选择任何元素。
事件触发三要素：通过谁触发？ 通过什么触发？触发后要做什么？
事件的写法：
w3c标准：事件写在行内，但是因为结构和行为要分离，所以我们一般情况下用JavaScript的方法来绑定事件，只有再极少数情况下，才将事件写在行内，事件的绑定方法：
浏览器中的节点(对象).on+事件句柄 = function( ){
要干什么？（放在浏览器中，不执行，当事件发生的时候再执行。）
}
oDiv.onclick=function(){
alert（1）
}
事件总结：事件是给浏览器定义一个预处理函数，当事件触发的时候，执行函数，这就是事件。
事件对象兼容写法： e=e || window.event;
鼠标事件.png
案例：一串div跟着鼠标移动
<style>
div{height: 20px;width: 20px;background: red;position: absolute;}
</style>
</head>
<body>
<script>
var aDiv = [];
var cache = document.createDocumentFragment();
for(var i = 1; i <= 20; i++){
var div = document.createElement("div");
div.innerHTML = i;
aDiv.push(div);
//document.body.appendChild(div);
cache.appendChild(div);
}
document.body.appendChild(cache);
//document绑定mousemove事件
document.onmousemove = function(e){
e = e || event;
var mouseX = e.clientX,
mouseY = e.clientY;
/* aDiv[0].style.left = mouseX + "px";
aDiv[0].style.top = mouseY + "px"; */
//从后往前,一次进一步
for(var i = aDiv.length-1; i > 0; i--){
aDiv[i].style.left = aDiv[i-1].style.left;
aDiv[i].style.top = aDiv[i-1].style.top;
}
//第0个赋值未当前鼠标坐标
aDiv[0].style.left = mouseX + "px";
aDiv[0].style.top = mouseY + "px";
}
</script>
</body>
键盘事件：keydown、keyup、keypress
document.onkeydown = function(e){
console.log(e.keyCode)
}
键盘上每一个键都有一个唯一的编码，用来识别当前用户正在操作的是键盘上哪一个键.
有兼容问题 兼容写法：e.keyCode || e.which
特殊键码：是否按下alt ctrl 和 shift
e.altKey
e.ctrlKey
e.shiftKey
返回值是布尔值；
可以用来判断组合键
if（e.keyCode==13&&e.altKey）{
alert('同时按下了enter和alt')；
}
默认行为（浏览器）
有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。
但是，有些时候我们是不需要默认事件的，所以就需要阻止默认事件.
方法1.return false；
方法2.
if(e.preventDefault) {
e.preventDefault();
}
else {
window.event.returnValue = false;
//return false;
}
一个完整事件包含 捕获阶段 ---> 目标阶段 --->冒泡阶段
子元素的事件被触发时，父级也会被触发（冒泡）
<body>
<div id="yeye">
<div id="baba">
<div id="erzi"></div>
</div>
</div>
<script>
yeye.onclick = function(){
console.log("yeye");
}
baba.onclick = function(e){
console.log("baba");
//阻止冒泡
e.stopPropagation();
e.cancelBubble=true;//兼容IE
}
erzi.onclick = function(){
console.log("erzi");
}
</script>
</body>
冒泡是可以阻止的
e.stopPropagation( );
e.cancelBubble=true;//兼容IE
事件监听
DOM2级事件处理是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；
//DOM2级
if(window.attachEvent){
oDiv.attachEvent("onclick", function(){ ... }); // IE只有冒泡阶段,所以没有第三个参数，而且需要加on；
}else{
oDiv.addEventListener( "click", function(){ ... },false); // false指冒泡阶段
}
/* 监听事件
* @param obj DOMObj 监听事件的对象
* @param type string 事件句柄
* @param fn function 事件处理函数
* @param [isCapture] boolean false代表冒泡，true代表捕获 默认值是false
*/
on : function(obj, type, fn, isCapture){
if(isCapture === undefined) isCapture = false;
if(obj.attachEvent){
//IE只能再冒泡阶段处理事件
obj.attachEvent("on"+type, fn);
}else{
obj.addEventListener(type, fn, isCapture);
}
},
<body>
<div id="yeye">
<div id="baba">
<div id="erzi"></div>
</div>
</div>
<script>
//绑定只能绑一个,后面覆盖前面
/* yeye.onclick = function(){
console.log("yeye");
}
yeye.onclick = function(){
console.log("yeye2222");
} */
//监听事件,可以同时监听多个
//第三个参数传false代表不捕获(再冒泡阶段处理事件)
//第三个参数传true代表捕获(再冒捕获段处理事件)
// yeye.addEventListener("click", function(){
// console.log("yeye");
// },true);
//
// yeye.addEventListener("click", function(){
// console.log("yeye222");
// },true);
//
// baba.addEventListener("click", function(){
// console.log("baba");
// },true);
//
// erzi.addEventListener("click", function(){
// console.log("erzi");
// },true);
tools.on(yeye, "click", function(){
console.log("yeye");
})
</script>
</body>
移除事件监听，第二个参数为必须，移除的事件处理函数
oDiv.removeEventListener( "click",fn）
oDiv.detachEvent("onclick",fn)
事件委托（事件代理）委派
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以处理某一类型的所有事件
使用场景主要用于事件源不确定的情况，可以把事件委托给父级
判断事件源：
e.target || e.srcElement
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<button>按钮</button>
<script>
var ul = document.querySelector("ul");
/* var aLi = document.querySelectorAll("li");
aLi = Array.from(aLi);
console.log(aLi);
aLi.forEach(function(li, index){
li.onclick = function(){
console.log(this.innerHTML);
}
}) */
//事件委托
ul.onclick = function(e){
e = e || event;
//获取事件源
var target = e.srcElement || e.target;
if(target.nodeName === "LI")
console.log(target.innerHTML);
//this
}
document.querySelector("button").onclick = function(){
var li = document.createElement("li");
li.innerHTML = "wgrf";
ul.appendChild(li);
}
</script>
</body>
网友评论