zoukankan      html  css  js  c++  java

  • 007 事件

    一：事件

    1.绑定事件的区别

    　　addEventListener，attachEvent

    　　相同点：都是元素的绑定事件

    　　不同点：参数个数不同

    　　　　　　浏览器的支持不同。

    　　　　　　addEventListener谷歌与火狐支持，IE8不支持，IE11支持，attchEvent：谷歌与火狐不支持，IE11不支持，IE8支持

    　　　　　　this不同，addEventListener中的this是当前绑定事件的对象，attachEvent中的this是window

    2.解绑

    　　第一种方式：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="第一个" id="btn1">
 9     <input type="button" value="第二个" id="btn2">
10     <script>
11         document.getElementById("btn1").onclick=function(){
12             console.log("第一个");
13         };
14         //解绑
15         document.getElementById("btn2").onclick=function(){
16             document.getElementById("btn1").onclick=null;
17         }
18     </script>
19 </body>
20 </html>

    　　第二种方式：

    　　　　这里需要使用命名函数才能生效。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="第一个" id="btn1">
 9     <input type="button" value="第二个" id="btn2">
10     <script>
11         function f1(){
12             console.log("第一个");
13         }
14         function f2() {
15             console.log("第一个");
16         }
17         document.getElementById("btn1").addEventListener("click",f1,false);
18         document.getElementById("btn1").addEventListener("click",f2,false);
19         //解绑，将第一个事件解除
20         document.getElementById("btn2").onclick=function () {
21             document.getElementById("btn1").removeEventListener("click",f1,false);
22         }
23     </script>
24 </body>
25 </html>

    3.事件冒泡

    　　事件冒泡：多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素的事件触发了，外面的元素的该事件自动触发。

    4.阻止事件冒泡

    　　window.event.cancelBubble=true; //IE特有的，谷歌支持，火狐不支持

    　　e.stopPropagation(); //谷歌与火狐都支持

    　　其中，window.event=e，是事件参数对象

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #dv1{
 8             width: 300px;
 9             height: 200px;
10             background-color: red;
11         }
12         #dv2{
13             width: 250px;
14             height: 150px;
15             background-color: green;
16         }
17         #dv3{
18             width: 200px;
19             height: 100px;
20             background-color: blue;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="dv1">
26         <div id="dv2">
27             <div id="dv3"></div>
28         </div>
29     </div>
30     <script>
31         document.getElementById("dv1").onclick=function () {
32             console.log(this.id);
33         }
34         document.getElementById("dv2").onclick=function () {
35             console.log(this.id);
36         }
37         document.getElementById("dv3").onclick=function (e) {
38             console.log(this.id);
39             // window.event.cancelBubble=true;    //IE特有的，谷歌支持，火狐不支持
40             e.stopPropagation();
41         }
42     </script>
43 </body>
44 </html>

    5.事件三个阶段

    　　事件捕获：外向内

    　　事件目标

    　　事件冒泡阶段

    　　addEventListener中有三个参数，其中第三个参数是boolean值，是控制事件阶段的，false是冒泡阶段，true是捕获阶段。所以，不同的阶段，执行的结果顺序会不同。

    6.为同一个元素绑定多个不同事件，指向同一事件处理函数

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="单击" id="btn">
 9     <script>
10         document.getElementById("btn").onclick=f1;
11         document.getElementById("btn").onmouseover=f1;
12         document.getElementById("btn").onmouseout=f1;
13         function f1(e) {
14             switch (e.type) {
15                 case "click":alert(this.id);break;
16                 case "mouseover":this.style.backgroundColor="red";break;
17                 case "mouseout":this.style.backgroundColor="green";break;
18             }
19         }
20     </script>
21 </body>
22 </html>

    二：百度搜索项目模拟

    1.程序

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #box {
 8             width: 450px;
 9             margin: 200px auto;
10         }
11 
12         #txt {
13             width: 350px;
14         }
15 
16         #pop {
17             width: 350px;
18             border: 1px solid red;
19         }
20 
21         #pop ul {
22             margin: 10px;
23             padding: 0px;
24             width: 200px;
25             list-style-type: none;
26 
27         }
28 
29         #pop ul li {
30 
31         }
32     </style>
33 </head>
34 <body>
35     <div id="box">
36         <input type="text" id="txt" value="">
37         <input type="button" value="搜索" id="btn">
38     </div>
39     <script>
40         var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨",
41             "苹果好吃", "苹果此次召回还是没有中国"];
42         //获取文本框注册按键键盘抬起事件
43         document.getElementById("txt").onkeyup=function () {
44             //每次进页面先删除一次
45             if(document.getElementById("dv")){
46                 document.getElementById("box").removeChild(document.getElementById("dv"));
47             }
48 
49 
50             var text = this.value;
51             //获取合适的数据
52             var temp = [];
53             for(var i=0;i<keyWords.length;i++){
54                 if(keyWords[i].indexOf(text)==0){
55                     temp.push(keyWords[i]);
56                 }
57             }
58             //不创建div的场景
59             if(this.value.length==0 || temp.length==0){
60                 if(document.getElementById("dv")){
61                     document.getElementById("box").removeChild(document.getElementById("dv"));
62                 }
63                 return;
64             }
65             //创建div
66             var div = document.createElement("div");
67             document.getElementById("box").appendChild(div);
68             div.id="dv";
69             div.style.width="350px";
70             div.style.border="1px solid green";
71 
72             //创建对应的p
73             for (var i=0;i<temp.length;i++){
74                 var p =document.createElement("p");
75                 div.appendChild(p);
76                 p.innerText=temp[i];
77                 p.style.margin=0;
78                 p.style.padding=0;
79                 p.style.cursor="pointer";
80                 p.style.marginTop="5px";
81                 p.style.marginLeft="5px";
82                 //鼠标进入
83                 p.onmouseover=function () {
84                     this.style.backgroundColor="yellow";
85                 }
86                 p.onmouseout=function () {
87                     this.style.backgroundColor="#fff";
88                 }
89             }
90 
91         }
92 
93     </script>
94 </body>
95 </html>

    2.效果：

    　　

    　　

    　　　　　　
  • 相关阅读:
    [转]relative、absolute和float
    CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)
    CSS 块状元素和内联元素
    CSS定位
    CSS实例
    jQuery简单实例
    [转]几种常见SQL分页方式
    MyBatis Mapper XML 文件
    MyBatis XML 映射配置文件
    MyBatis 入门
  • 原文地址：https://www.cnblogs.com/juncaoit/p/11257347.html
Copyright © 2011-2022 走看看