html原生触发事件,jQ点击事件用原生写的方法.html

onclick事件

htmlOnClickHandler

html元素不加on不会触发事件

htmlOnClick

jsOnClick

addEventListener

addEventListener1

// JQ点击事件的写法

/**

$(function(){

$("button").click(function(){

alert("JQ click 事件");

});

});

**/

// 原生js有三种可以触发onclick事件(所有HTML元素都支持onclick事件)

// 第一种 在html中使用onclick属性

function clickHandler() {

alert("我是调用clickHandler函数哦");

}

//第二种 在javascript中，使用onclick属性

document.getElementById("jsOnClick").onclick = function(){

alert("我用的js中的onclick属性写的");

};

// js属性不加on是错误的写法

document.getElementById("jsOnClick").onclick = function(){

alert("我用的js中的onclick属性写的");

};

//第三种 在javascipt中，使用addEvenListener()方法 ( addEventListener()方法监听的事件，是不需要加on)

// 滑入事件

document.getElementById("addEventListener").addEventListener("mouseover",function(){

console.log("我是鼠标滑过事件，貌似阻止后面的事件无法执行，但是可以通过键盘辅助执行完下面的事件");

});

document.getElementById("addEventListener").addEventListener("click",function(){

console.log("我是点击事件");

});

document.getElementById("addEventListener").addEventListener("click",function(){

console.log("我也是点击事件"); // addEventListener()方法重复在同一个元素上面注册了同一事件，并不覆盖之前的事件，这个里面的代码是可以执行的

});

document.getElementById("addEventListener").addEventListener("mousedown",function(){

console.log("我是鼠标按下事件"); // addEventListener()方法重复在同一个元素上面注册了不同事件，并不覆盖之前的事件，这个里面的代码是可以执行的

});

document.getElementById("addEventListener").addEventListener("mouseup",function(){

console.log("我是鼠标松开事件"); // addEventListener()方法重复在同一个元素上面注册了不同事件，并不覆盖之前的事件，这个里面的代码是可以执行的

});

document.getElementById("addEventListener").addEventListener("dbclick",function(){

console.log("我是双击事件"); // addEventListener()方法重复在同一个元素上面注册了不同事件，如果一个元素已经有单击事件了双击事件是不会执行的

});

// 这是加了on的写法 是错误的 不会发生任何事件触发

document.getElementById("addEventListener1").addEventListener("onclick",function(){

alert("这是错误的写法");

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史