Dom第三天
一、事件：
1.事件的组成
// 事件源：触发事件的对象；
// 事件的名字：事件类型（事件名字实际上是没有on）
// 事件处理函函数：命名函数或匿名函数
// 事件触发和事件响应
my$("btn").οnclick=function(){
};
my$("btn").click=function(){
};
2.模拟多人开发
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script src="programer1.js"></script>
<script src="programer2.js"></script>
<script>
//第三个人
my$("btn").οnclick=function () {
console.log("3");
};
var obj={
sayHi:function () {
console.log("萨瓦迪卡");
}
};
//调用对象的方法,先判断对象中有没有这个方法,有才能调用,没有则提示没有这个方法
if(obj["sayHi"]){
obj["sayHi"]();
}else{
console.log("没有这个方法");
}
my$("btn")["onclick"]=function () {
console.log("我勒个去");
};
//判断这个按钮有没有注册这个事件
if(my$("btn")["onclick"]){
my$("btn")["onclick"]();
}else{
console.log("没有注册事件");
}
</script>
3.判断元素是否是注册事件
//封装代码,为任意元素注册任意的事件
function addEvent(element,eventName,fn) {
var oldEvent=element["on"+eventName];
if(typeof oldEvent!="function"){
element["on"+eventName]=fn;//没有事件则注册事件
}else{
//注册了
element["on"+eventName]=function () {
oldEvent();
fn();
//当这个事件触发的时候,把之前注册事件的所有的事件处理函数，拿出来直接调用
};
}
}
addEvent(my$("btn"),"click",function () {
console.log("1");
});
addEvent(my$("btn"),"click",function () {
console.log("2");
});
addEvent(my$("btn"),"click",function () {
console.log("3");
});
4.为元素绑定事件的不同方式
//为元素绑定事件的不同方式:
//1.addEventListener();
//2.attachevent();
/*
* 第一个参数:事件类型(事件的名字)=======没有on(传参数的时候不要加on)
* 第二个参数:事件处理函数:命名函数,匿名函数
* 第三个参数；事件捕获---默认全部为false
*
* */
// my$("btn").addEventListener("click", function () {
// console.log("我了个去,这也可以");
// }, false);
//
// my$("btn").addEventListener("click", function () {
// console.log("苍天啊,大地啊,为何我这么美丽啊");
// }, false);
/*
* 第一个参数:事件类型=========必须有on
* 第二个参数:事件处理函数
*
* 方法IE支持----
* */
// my$("btn").attachEvent("onclick",function () {
// console.log("绑定事件了1");
// });
// my$("btn").attachEvent("onclick",function () {
// console.log("绑定事件了2");
// });
5.为元素绑定事件的兼容代码
//为任意元素绑定任意事件=====元素,事件类型,事件处理函数
function addEventListener(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;//直接注册一个
}
}
addEventListener(my$("btn"),"click",function(){
console.log("123");
});
addEventListener(my$("btn"),"click",f2);
function f2(){
console.log("456");
}
6.为元素解除绑定的不同方式
6.1 册事件：1.对象.on事件类型名字=事件处理函数；
例子：my$("btn").οnclick=function(){};
2. 绑定事件
对象.addEventListener("事件类型的名字"，事件处理函数，false)；
例子：my$("btn").addEventListener("click",function(){},false);
3.绑定事件
对象.attachEvent("on"+事件类型名,事件处理函数);
例子:my$("btn").attachEvent("on"+"click",function(){});
6.2.移除事件：三种方式
1.对象.on+事件类型名字=null;
2.对象.removeEventListener("事件类型没有on"，事件处理函数的名 字，FALSE)；
3.对象.detachEvent("事件类型有on"，事件处理函数的名字)；
my$("btn").attachEvent("onclick",f1);
function f1() {
console.log("中午吃啥呢?");
}
my$("btn").attachEvent("onclick",f2);
function f2() {
console.log("每天中午最愁的事情");
}
my$("btn2").οnclick=function () {
my$("btn").detachEvent("onclick",f1);
};
7.为元素解除绑定的兼容代码
function removeEventListener(element,type,fn){
if(element.removeEventListener){
element.removeEventListener(type,fn,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
解绑的时候需要调用兼容代码
注意：用什么方式为元素绑定事件，一定要用对应的方式进行解绑
8.移除元素是否解绑该元素的事件
//为div中的按钮绑定点击事件
addEventListener(my$("btn"),"click",f1);
function f1() {
console.log("我活的很好");
}
//点击第二个按钮,移除div中的内容
my$("btn2").οnclick=function () {
my$("dv").innerHTML="";
};
9.事件冒泡：元素A中有元素B，元素B和元素A有相同的事件，元素B的事件触发，元素A的事件会自动触发
// var objs=[my$("dv1"),my$("dv2"),my$("dv3")];
// objs.forEach(function (ele,index) {
ele.οnclick=function () {
console.log(this.id);//自己的id属性的值
};
//
// //ele是对象(数组元素)
// //index是索引
// ele.addEventListener("click",function () {
// console.log(this.id);
// },false);
// });
my$("dv1").onclick = function () {
console.log(this.id);
};
my$("dv2").onclick = function () {
console.log(this.id);
};
my$("dv3").onclick = function (e) {
console.log(this.id);
//e.stopPropagation();
//window.event.cancelBubble=true;//取消事件冒泡
//取消事件冒泡的兼容代码
e=e||window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
window.event.cancelBubble=true;//IE8的写法
e.stopPropagation();//火狐浏览器的写法
//谷歌是二者都支持
};
10.事件捕获：
//事件冒泡:从里向外
//事件捕获:从外向内
// var objs=[my$("dv1"),my$("dv2"),my$("dv3")];
// objs.forEach(function (ele) {
// ele.addEventListener("click",function (e) {
// //console.log(this.id+"===="+e.eventPhase);
// },true);
// });
my$("dv1").οnmοusedοwn=function (e) {
console.log(e);
};
//e.type===事件的类型-----事件的名字,没有on
//如何验证元素的事件触发的时候,是哪一个阶段
//事件阶段:
/*
* 1.事件捕获
* 2.事件目标
* 3.事件冒泡
//事件有三个阶段,1---事件捕获,2----事件目标,3------事件冒泡
//事件捕获和事件冒泡不能同时发生
//每一次事件目标必然存在
11.为同一个元素注册不同的事件调用相同的事件处理函数
//为同一个元素,注册不同的事件,指向相同的事件处理函数
my$("btn").οnclick=f1;
my$("btn").οnmοuseοver=f1;
my$("btn").οnmοuseοut=f1;
function f1(e) {
switch (e.type){
case "click":console.log("哎呀,我已经困了");break;
case "mouseover":this.style.backgroundColor="pink";break;
case "mouseout":this.style.backgroundColor="";break;
}
}
12.页面中嵌入其他的页面
<iframe src="http://www. .com" frameborder="0" width="50%" height="50%"></iframe>
13.随机生成16进制颜色
function getColor(){
var str="#";
var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
for(var i=0;i<6;i++){
var num=parseInt(Math.random()*16);
str+=arr[num];
}
return str;
}
my$("dv").οnclick=function(){
this.style.backgroundColor=getColor();
};