鼠标事件,键盘事件,html事件

鼠标事件

1.click: 当单击鼠标按钮并在松开时触发

onclick = function() {
    
    
        console.log('单击了鼠标'); 
};

2.dblclick: 当双击鼠标按钮时触发。

ondblclick = function() {
    
    
        console.log('双击了鼠标'); 
};

3.mousedown:当按下了鼠标还未松开时触发。

onmousedown = function() {
    
    
        console.log('按下鼠标'); 
};

4.mouseup: 释放鼠标按钮时触发。

onmouseup = function() {
    
    
        console.log('松开了鼠标'); 
};

5.mouseover:当鼠标移入某个元素的那一刻触发。

onmouseover = function() {
    
    
        console.log('鼠标移入了'); 
}; 

6.mouseout:当鼠标刚移出某个元素的那一刻触发。

onmouseout = function() {
    
    
        console.log('鼠标移出了'); 
}; 

7.mousemove:当鼠标指针在某个元素上移动时触发。

onmousemove = function() {
    
    
        console.log('鼠标移动了'); 
};  

8.mouseenter:当鼠标移入某个元素的那一刻触发。

onmouseenter = function() {
    
    
        console.log('鼠标移入了'); 
}; 

9.mouseleave:当鼠标刚移出某个元素的那一刻触发。

onmouseleave = function() {
    
    
        console.log('鼠标移出了'); 
};

10.onwheel 滚轮事件

onwheel = function () {
    
    
      console.log("onwheel 滚轮事件")
 };

mouseover: 元素的子元素移入也会触发事件. mouseenter : 元素的子元素移入不会触发事件

键盘事件

1.keydown:当用户按下键盘上某个键触发,如果按住不放,会重复触发。

window.onkeydown = function() {
    
    
        console.log(按下了键盘上的某个键); 
};

2.keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发

window.onkeypress = function() {
    
     
        console.log('按下了键盘上的字符键'); 
};

3.keyup:当用户释放键盘上的某个键触发。

window.onkeyup = function() {
    
    
        console.log(松开键盘上的某个键); 
};

HTML事件

1.load:当页面完全加载后触发,dom结构加载完毕,并在外币资源也加载完毕.

window.onload = function() {
    
     
        console.log('页面已经加载完毕'); 
};

2.unload:当页面完全卸载后触发:页面刷新,关闭.

window.onunload = function() {
    
     
        console.log('页面已经卸载完毕'); 
};

3.select:当用户选择文本框(input 或 textarea)中的内容触发。

input.onselect = function() {
    
     
        console.log('选择了文本框中的内容'); 
};

4.change:当文本框(input 或 textarea)内容改变且失去焦点后触发。

input.onchange = function() {
    
     
        console.log('文本框中内容改变了'); 
};

5.focus:当页面或者元素获得焦点时触发。

input.onfocus = function() {
    
     
        console.log('文本框获得焦点'); 
};

6.blur:当页面或元素失去焦点时触发。

input.onblur = function() {
    
     
        console.log('文本框失去焦点'); 
};

7.submit:当用户点击提交按钮在元素节点上触发。

form.onsubmit = function() {
    
     
        console.log(‘提交form表单’);  
};
//数据校验,如果合法,就 return true
 //不合法就return false;
//好处,降低了服务器的压力,提高了用户的体验
//  return false 阻止默认行为不会触发表达的条件行为

8.reset:当用户点击重置按钮在元素节点上触发。

form.onreset = function() {
    
     
        console.log('重置form表单'); 
};

9.scroll:当用户滚动带滚动条的元素时触发。

window.onscroll= function() {
    
     
        console.log('滚动了滚动条了'); 
};

10.onsize 窗口改变大小时触发

猜你喜欢

转载自blog.csdn.net/qq_45785424/article/details/106531129
今日推荐