鼠标事件、表单特有事件、 change事件

最新推荐文章于 2024-06-26 20:37:52 发布

萌新+1

最新推荐文章于 2024-06-26 20:37:52 发布

阅读量643

点赞数

本文链接：https://blog.csdn.net/qq_43288882/article/details/89928054

版权

鼠标事件

  // onclick 单击 ondblclick 双击 
   
    // onmousedown 鼠标按下  onmouseup 鼠标松开  onmousemove 鼠标移动
    	
    // onmouseover&onmouseout    onmouseenter&onmouseleave 鼠标移入移出

区别：onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件 onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

表单特有事件

//onfocus 当表单元素获取焦点时
// onblur  当表单元素失去焦点时
<body>
<input type="text" id="ipt">
</body>
<script>
// ipt.focus();   
ipt.onfocus=function(){
	this.style.border="2px solid green"
}

ipt.onblur=function(){
	this.style.border="2px solid #999"
}
</script>

change事件

<body> 
<label> 
<input type="checkbox" id="ipt"> hello
 </label>
  <select name="" id="sel"> 
  <option>北京</option>
   <option>上海</option> 
   <option>深圳</option>
    <option>杭州</option>
     <option>西安</option> 
     </select>
    </body> <script> 
    // change事件主要用于select checkbox radio元素 
    
    ipt.onchange = function(){
   // checkbox设置或返回 checkbox 是否应被选中（true||false）
   //默认为false
     console.log(this.checked)  
     } 
    sel.onchange = function () {
     console.log(this.value)//输出为输入框的值
      }
     </script>`

参考：

https://blog.csdn.net/qq_32798905/article/details/82348643
https://blog.csdn.net/heisetoufa/article/details/84280560