js三大事件

鼠标事件

click ： 单击

dblick：双击

mousedown：鼠标按下

mouseup：鼠标抬起

mouseout：鼠标离开

mousemove：鼠标一移动

mouseenter：鼠标进入

//html
<button onclick="myClick()">鼠标单击</button> 
<button ondblclick="myDBClick()">鼠标双击</button> 
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button> 
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button> 
<button onmousemove="myMouseMove()">鼠标移动</button> 
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>

//JS
   function myClick() {  
       console.log("你单击了按钮！");  
   }  
   function myDBClick() {  
       console.log("你双击了按钮！");  
   }  
   function myMouseDown() {  
       console.log("鼠标按下了！");  
   }  
   function myMouseUp() {  
       console.log("鼠标抬起了！");  
   }  
   function myMouseOver() {  
       console.log("鼠标悬浮！");  
   }  
   function myMouseOut() {  
       console.log("鼠标离开！")  
   }  
   function myMouseMove() {  
       console.log("鼠标移动！")  
   }  
   function myMouseEnter() {  
       console.log("鼠标进入！")  
   }  
   function myMouseLeave() {  
       console.log("鼠标离开！")  
   }

键盘事件

keydown：按键按下

keyup：按键抬起

keypress：按键按下抬起

//html
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)"> 


//JS
/*输出输入的字符*/
function myKeyDown(id) {
  console.log(document.getElementById(id).value);
}

/*按键结束，字体转换为大写*/
function myKeyUp(id) {
  var text = document.getElementById(id).value;
document.getElementById(id).value = text.toUpperCase();
}

　　

HTML事件

load：文档加载完成

select：被选中的时候

change：内容被改变

focus：得到光标

resize：窗口尺寸变化

scroll：滚动条移动

//html
<body onload="loaded()"> 
  <div style="height: 3000px" ></div> 
  <input type="text" id="name" onselect="mySelect(this.id)"> 
  <input type="text" id="name2" onchange="myChange(this.id)"> 
  <input type="text" id="name3" onfocus="myFocus()"> 
</body> 

//JS
window.onload = function () {  
       console.log("文档加载完毕！");  
   };  
   /*window.onunload = function () {  
    alert("文档被关闭！");  
    };*/  
   /*打印选中的文本*/  
   function mySelect(id) {  
       var text = document.getElementById(id).value;  
       console.log(text);  
   }  
   /*内容被改变时*/  
   function myChange(id) {  
       var text = document.getElementById(id).value;  
       console.log(text);  
   }  
   /*得到光标*/  
   function myFocus() {  
       console.log("得到光标！");  
   }  
   /*窗口尺寸变化*/  
window.onresize = function () {  
       console.log("窗口变化！")  
   };  
   /*滚动条移动*/  
window.onscroll = function () {  
       console.log("滚动");  
   }  
事件模型
//html
<body> 
<!--脚本模型：行内绑定--> 
<button onclick="alert('hello')">hello</button> 
<!--内联模型--> 
<button onclick="showHello()">hello2</button> 
<!--动态绑定--> 
<button id="btn">hello3</button> 
</body> 

//JS
<script> 
   function showHello() {  
       alert("hello");  
   }  
   /*DOM0：同一个元素只能添加一个同类事件  
    * 如果添加多个，后面的会把前面的覆盖掉*/  
   var btn = document.getElementById("btn");  
btn.onclick = function () {  
       alert("hello");  
   };  
btn.onclick = function () {  
       alert("hello world");  
   };  
   /*DOM2:可以给一个元素添加多个同类事件*/  
   btn.addEventListener("click", function () {  
       alert("hello1");  
   });  
   btn.addEventListener("click", function () {  
       alert("hello2");  
   });  
   /*不同浏览器的兼容写法*/  
   /*IE*/  
   if (btn.attachEvent) {  
       btn.attachEvent("onclick", function () {  
           alert("hello3");  
       });  
   /*W3C*/  
   } else {  
       btn.addEventListener("click", function () {  
           alert("hello4");  
       })  
   }  
</script>

　　

事件冒泡与事件捕获

冒泡

<div id="s1">s1
    <div id="s2">s2</div>
</div>

<script>
    s1.addEventListener("click",function(e){
        console.log("s1 冒泡事件");
    },false);
    s2.addEventListener("click",function(e){
        console.log("s2 冒泡事件");
    },false);
</script>

捕获

<div id="s1">s1
    <div id="s2">s2</div>
</div>

<script>
    s1.addEventListener("click",function(e){
        console.log("s1 捕获事件");
    },true);
    s2.addEventListener("click",function(e){
        console.log("s2 捕获事件");
    },true);
</script>

　　

 

 
posted @ 2021-12-06 09:49  泡椒pg  阅读(79)  评论(0)    收藏  举报