JavaScript 1103 增加了

1.7 事件和事件对象


HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为，也可以是用户行为。
​
事件对象就是当前事件发生的时候 所有信息封装成的对象
​
也就是说 用户对网页的一次操作就是一个事件，例如 用户点击了页面的按钮 这个操作就称之为 点击事件。用户用的是左键还是右键点击的按钮 等信息 就是事件对象。
​
例如：
<button  id="haha">你好 世界</button>
        
        
        <script type="text/javascript">
            
            haha.onmousedown = function( e ){
                
                console.log(  e  );
                
            }
​
</script>

1.8 鼠标事件

属性描述DOM
onclick 当用户点击某个对象时调用的事件句柄。 2
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发  
ondblclick 当用户双击某个对象时调用的事件句柄。 2
onmousedown 鼠标按钮被按下。 2
onmouseenter 当鼠标指针移动到元素上时触发。 2
onmouseleave 当鼠标指针移出元素时触发 2
onmousemove 鼠标被移动。 2
onmouseover 鼠标移到某元素之上。 2
onmouseout 鼠标从某元素移开。 2
onmouseup 鼠标按键被松开。 2 

 <style type="text/css">
            div{
                width: 300px;
                height: 300px;
                background-color: red;
            }
            
            ul {
                width: 200px;
                border: 2px solid red;
                background-color: blue;
                display: none;
                position: fixed;
            }
        </style>
​
    </head>
    <body>
        
        <div id="haha"> 123 </div>
        <ul id="hehe">
            <li><a href="http://www.baidu.com">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
        </ul>   
        
        <script type="text/javascript">
            
            haha.oncontextmenu = function(e){
                hehe.style.left = e.clientX + "px";
                hehe.style.top = e.clientY + "px";
                
                hehe.style.display = "block";
                // 将系统的禁用  
                return  false;
            }
            haha.onclick = function(){
                hehe.style.display = "none";
            }
        </script>
     <style type="text/css">
            #aaa {
                box-shadow: 10px 10px 50px 10px black;
            }
        </style>
​
    </head>
    <body>
        
          <canvas id="aaa" width="1200" height="600" ></canvas>
          <p>
              <input type="color" id="bar">
              <input type="range"  min="5"  max="100"  id="foo">
          </p>
        
         <script type="text/javascript">
            
            /* 获取 画笔 */
            var  hb =   aaa.getContext("2d");
            
            aaa.onmousedown = function( e ){
                hb.beginPath();
                hb.lineWidth = foo.value;
                hb.strokeStyle = bar.value;
                hb.moveTo(  e.clientX ,  e.clientY  );
                
    aaa.onmousemove = function( e ){
hb.lineTo( e.clientX , e.clientY);
hb.stroke();
    }

    }

aaa.onmouseup = function(){
aaa.onmousemove = null;
    }



</script>

1.9 键盘事件

属性描述DOM
onkeydown 某个键盘按键被按下。 2
onkeypress 某个键盘按键被按下并松开。 2
onkeyup 某个键盘按键被松开。 2 

<input type="text"  id="foo">
        
        
        <script type="text/javascript">
            
            foo.onkeypress = function(  e  ){
                
                if(e.keyCode <48 || e.keyCode>57){
                    console.log(e.keyCode)
                    return false;
                }
                    
            }
            
            
        </script>
​
​
​
​
​

1.10 框架/对象（Frame/Object）事件

属性描述DOM
onabort 图像的加载被中断。 ( <object>) 2
onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发 2
onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)  
onhashchange 该事件在当前 URL 的锚部分发生修改时触发。  
onload 一张页面或一幅图像完成加载。 2
onpageshow 该事件在用户访问页面时触发  
onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发  
onresize 窗口或框架被重新调整大小。 2
onscroll 当文档被滚动时发生的事件。 2
onunload 用户退出页面。 ( <body> 和 <frameset>) 2 

        <style type="text/css">
            
            .a1 {
                position: fixed;
                left: 200px;
                top: 50px;
            }
            .a2 {
                position: static;
            }
            
        </style>
        
​
    </head>
    <body>
        
        
        <input type="text"  id="foo">
        
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>


<script type="text/javascript">

window.onscroll = function(e){

if(window.pageYOffset > 235){
foo.className = "a1";
    }else{
foo.className = "a2";
    }
    }

</script>

 

1.11 表单事件

属性描述DOM
onblur 元素失去焦点时触发 2
onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) 2
onfocus 元素获取焦点时触发 2
onfocusin 元素即将获取焦点时触发 2
onfocusout 元素即将失去焦点时触发 2
oninput 元素获取用户输入时触发 3
onreset 表单重置时触发 2
onsearch 用户向搜索域输入文本时触发 ( <input="search">)  
onselect 用户选取文本时触发 ( <input> 和 <textarea>) 2
onsubmit 表单提交时触发 2 

​
<body>
    
        <img  width="200" height="200" style="border-radius: 150px;border: 2px solid red;"  id="foo" >
        <input type="file" accept="image/*"  multiple="multiple"   id="bar">
        
        <script type="text/javascript">
            
            bar.onchange = function(){
                /* 文件读取对象 */
                var  r = new FileReader();
                /* 读取文件路径 */
                r.readAsDataURL( bar.files[0] );
                /* 当读取加载完成 */
                r.onload = function(){
                    foo.src = r.result;
                }
            }
            
        </script>
        
    </body>

1.12 事件冒泡


​
<ul>
            <li class="foo">宝马
               <ul>
                  <li>M3</li>
                  <li>M4</li>
                  <li>M5</li>
               </ul>
            
            </li>
            <li class="foo">宝骏
               <ul>
                    <li>730</li>
                    <li>520</li>
                    <li>310</li>
               </ul>
            </li>
            <li class="foo">保时捷
                <ul>
                    <li>718</li>
                    <li>911</li>
                    <li>918</li>
                </ul>
            </li>
        </ul>
        
        
        <script type="text/javascript">
             var arr = document.querySelectorAll(".foo");
             for(var i=0;i<arr.length;i++){
                 var li = arr[i];
                 li.onclick = function(){
                     if(this.firstElementChild.style.display == "none"){
                         this.firstElementChild.style.display = "block";
                     }else{
                         this.firstElementChild.style.display = "none";
                     }
                 }
             }
        </script>
​
​
此时我们点击的是 标签的子标签 也能触发当前标签的点击事件 这就称之为  事件冒泡
<head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        
        
        <style type="text/css">
            
            #foo {
                width: 200px;
                height: 200px;
                background-color: blue;
            }
            #bar {
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
            
            
        </style>
        
    </head>
    <body>
        
         <div id="foo">
             <div  id="bar"></div>
         </div>
         
         <script type="text/javascript">

foo.onclick = function(){
alert("大的被点击了");
    }

bar.onclick = function(  e  ){
alert("小的被点击了");
e.cancelBubble = true;
    }
</script>

           
</body>
<ul>
<li class="foo">宝马
       <ul>
          <li>M3</li>
      <li>M4</li>
      <li>M5</li>
       </ul>

</li>
<li class="foo">宝骏
       <ul>
            <li>730</li>
       <li>520</li>
       <li>310</li>
       </ul>
</li>
<li class="foo">保时捷
        <ul>
        <li>718</li>
        <li>911</li>
        <li>918</li>
        </ul>
</li>
</ul>


<script type="text/javascript">
var arr = document.querySelectorAll(".foo");

for(var i=0;i<arr.length;i++){
var li = arr[i];
li.onclick = function(){
if(this.firstElementChild.style.display == "none"){
this.firstElementChild.style.display = "block";
     }else{
this.firstElementChild.style.display = "none";
     }
     }
     }

      var arr1 = document.querySelectorAll(".foo  li");
      for(var i=0;i<arr1.length;i++  ){
      var li = arr1[i];
      li.onclick = function(e){
e.cancelBubble = true;
      }
      }

</script>
        
​

 

posted @ 2021-11-03 20:17  吴光熠  阅读(55)  评论(0)    收藏  举报