为元素绑定事件的方法
function setInnerText(element,text) {
if(typeof element.textContent=="undefined"){
element.innerText=text;
}else{
element.textContent=text;
}
}
*1.为元素绑定事件(DOM),有两种,但是不兼容
*方法一:对象.addEventLister("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
*方法二:对象.attachEvent("有on的事件类型",事件处理函数)--谷歌和火狐不支持,IE8支持
*2.为按钮绑定点击事件
*参数1:事件的类型---事件的名字,没有on [string]
*参数2:事件处理函数---函数(命名函数,匿名函数)
*参数3:布尔类型的值
*
*总结绑定事件的区别:
*相同点:都可以为元素绑定事件
*不同点:1.方法名不一样
* 2.参数个数不一样,addEventListener();有三个参数,而attachEvent();只有两个参数
* 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
* 4.attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
* 5.this不同,addEventListener中的this是当前绑定事件的对象,attachEvent中的this是window
* 6.addEventListener中事件的类型(事件的名字)没有on,attachEvent中的事件的类型(事件的名字)有on
创建事件的兼容代码
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;
}
}
为元素解绑事件的方法
*注意:用什么方式绑定事件,就用什么方式解绑事件
* 1.解绑事件
* 对象.on事件名字=事件处理函数--->绑定事件
* 对象.on事件名字=null;
my$("btn").onclick=function () {
console.log("还要多远才能进入你的心,还要多久才能和你接近");
};
my$("btn2").onclick=function () {
my$("btn").onclick=null;
};
* 2.解绑事件
* 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
* 对象.removeEventListener("没有on的事件类型",函数名,false);
function f1() {
console.log("还要多远才能进入你的心,还要多久才能和你接近");
}
function f2() {
my$("btn").removeEventListener("click",f1,false);
}
my$("btn").addEventListener("click",f1,false);
my$("btn2").addEventListener("click",f2,false);
* 3.解绑事件
* 对象.attachEvent("on事件类型",命名函数);---绑定事件
* 对象.detachEvent("on事件类型",函数名字);
解绑事件的兼容代码
<script>
解绑事件的兼容代码
为任意的一个元素,解绑对应的事件
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}
</script>
事件冒泡
* 事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,
* 如果里面元素的事件触发了,那么外面元素的该事件就会自动的触发了
* 如何阻止事件冒泡:
* 1.window.event.cancelBubble=true;谷歌支持,IE特有的,火狐不支持
* 2.e.stopPropagation(); 谷歌和火狐支持,IE不支持
事件的三个阶段
* 事件有三个阶段
* 1.事件捕获阶段(1)
* 2.事件目标阶段(2)
* 3.事件冒泡阶段(3)
* 为元素绑定事件:
* addEventListener("没有on的事件类型",事件处理函数,boolean值)
* 事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->
* window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持
* window.event就是一个对象,是IE中的标准
* e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持
* window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准
* 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替
* addEventListener中第三个参数是控制事件阶段的,true表示捕获阶段,false表示冒泡阶段
* 通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
* 冒泡阶段:从里向外;捕获阶段:从外向内
模拟百度搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 450px;
margin: 200px auto;
}
#txt {
width: 350px;
}
</style>
<script src="common.js"></script>
</head>
<body>
<div id="box">
<input type="text" id="txt">
<input type="button" value="搜索" id="btn">
</div>
<script>
var keyWords = ["做个梦给你", "做个梦给你", "等到看你银色满际",
"等到分不清季节更替", "还要多远才能进入你的心",
"还要多久才能和你接近", "咫尺远近却无法靠近的那个人"];
my$("txt").onkeyup = function () {
if (my$("dv")) {
my$("box").removeChild(my$("dv"));
}
var text = this.value;
var temp = [];
for (var i = 0; i < keyWords.length; i++) {
if (keyWords[i].indexOf(text) == 0) {
temp.push(keyWords[i]);
}
}
if (this.value.length == 0 || temp.length == 0) {
if (my$("dv")) {
my$("box").removeChild(my$("dv"));
}
return;
}
var dvObj = document.createElement("div");
my$("box").appendChild(dvObj);
dvObj.id = "dv";
dvObj.style.width = "350px";
dvObj.style.border = "1px solid green";
for (var i = 0; i < temp.length; i++) {
var pObj = document.createElement("p");
dvObj.appendChild(pObj);
setInnerText(pObj, temp[i]);
pObj.style.margin = "0";
pObj.style.padding = "0";
pObj.style.cursor = "pointer";
pObj.style.marginTop = "5px";
pObj.style.marginLeft = "5px";
pObj.onmouseover = function () {
this.style.backgroundColor = "yellow";
};
pObj.onmouseout = function () {
this.style.backgroundColor = "";
};
}
}
</script>
</body>
</html>