一、事件的绑定
(1)dom元素事件:鼠标事件
- 有click(点击)、mouseenter(鼠标移入)、mousemove(鼠标移动)、mouseleave和mouseout(鼠标离开)、
- mouseleave和mouseout鼠标离开事件的区别:mouseout——水平垂直方向的离开、mouseleave——水平离开
(2)事件的绑定方法
- 在页面元素之内直接进行事件的绑定
- dom元素操作进行事件绑定
- 事件的监听进行事件绑定
第一种:在页面元素之内直接进行事件的绑定
<button οnclick="">按钮</button>
给""里面添加点击事件发生执行的函数名
第二种:dom元素操作进行事件绑定
<button id="btn">按钮id</button>
<button class="btnc">按钮class</button>
<button class="btnc">按钮class</button>
<button class="btnc">按钮class</button>
- 通过id获取dom元素
var btn=document.getElementById("btn");
btn.οnclick=function (){
/*触发事件执行的代码区域*/
}
- 通过class获取dom元素
var btnclass=document.getElementsByClassName("btnc");//得到的对象是数组
绑定方法一:
/*注意:js不能操作隐式迭代(不能操作一堆元素)*/
for(var i=0;i<btnclass.length;i++)
{
/*给当前的绑定对象间接赋值 可以直接获取 对应的i值*/
btnclass[i].index=i;
btnclass[i].οnclick=function (){
/* 如果直接赋i值,即alert(i); 会直接弹i的最大值 弹出值分别为2,2,2*/
alert(this.index); /*this事件里面的执行对象就是当前要获取的对象 弹出值分别为0,1,2*/
}
}
绑定方法二:
for(var i=0;i<btnclass.length;i++)
{
(function (args){
btnclass[i].οnclick=function (){
alert(args);
}
})(i);
}
绑定方法三:
for(var i=0;i<btnclass.length;i++)
{
var add=function (args){
return function (){
console.log(args);
};
};
btnclass[i].οnclick=add(i);
}
第三种:事件的监听进行事件的绑定
<div id="btnb">
<button id="btn_add">事件的监听</button>
</div>
冒泡原则:从子元素事件往外扩散
阻止事件冒泡的方法:return false;event.preventDefault(); event.defaultPrevented(); event.stopPropagation();
var btnadd=document.getElementById("btn_add");
var btnblock=document.getElementById("btnb");
/*如果第三个参数不写 默认冒泡原则 从子元素事件往外扩散*/
btnblock.οnclick=function(){
console.log(2);
}
btnadd.οnclick=function (){
console.log(1); //会默认冒泡原则,输出 1 2
/*若在这加入event.stopPropagation();可以阻止事件冒泡。输出为 1*/
事件的监听:
var btnadd=document.getElementById("btn_add");
var btnblock=document.getElementById("btnb");
/*方法一:*/
btnblock.addEventListener("click",function (){
console.log(2);
});
btnadd.addEventListener("click",function (){
console.log(1);
});
btnadd.addEventListener("mouseenter",function (){
console.log(2);
})
/*方法二:*/
btnadd.addEventListener("click",showbtnnum);
function showbtnnum(){
alert(1);
}
移除事件的监听:
var btnadd=document.getElementById("btn_add");
btnadd.addEventListener("click",addbtn)
function addbtn(){
console.log(2);
//移除事件 以及移除事件的方法
this.removeEventListener("click",addbtn);
}
btnadd.οnclick=function (){
console.log(2);
//执行完之后移除该事件
this.οnclick=null;
}
二、dom元素的获取:
1.DOM元素的获取 4个:class、id、Name、TagName
document.getElementsByClassName()
document.getElementsByName()
document.getElementById()
document.getElementsByTagName()
2.获取元素的内容:
- innerHtml 获取的是元素的所有html内容
- innerText 获取的是元素的文本
3.获取前后同胞元素
- nextElementSibling 获取下一同胞元素
- nextSibling 获取同胞节点
- previousElementSibling 获取上一个同胞元素
- previoElementSibling 获取上同胞节点
4.前后元素的追加
- appendChild() 当前元素的内容之后追加
- insertBefore(new child,old child); 在旧的子集元素之前追加新的元素
5.dom元素创建
- document.creatElement("");
6.元素的删除
- removechild 删除当前对象里面的子集元素
- remove 删除元素
7.替换元素
- replaceChild()
8.获取节点的方法
- childNodes 集合(nodetype nodevalue)
9.获取子集元素
- children 子集元素
- firstChild 第一个子元素
- lastChild 最后一个子元素