html原生触发事件,jQ点击事件用原生写的方法.html
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
原始数据
按行查看
历史
html原生触发事件,jQ点击事件用原生写的方法.html相关推荐
- jq点击事件(jq点击事件)
用的HTML5里video标签,用jq怎么点击全屏之后自动横屏播? 可以自己设置的 js如何获取class的元素不能用jq<br/1br/>2 2.var classElements = ...
- jq实现点击一个按钮,触发另一个点击事件(点击按钮触发另一个按钮的点击事件)
jq实现点击一个按钮,触发另一个点击事件 $("#a").click(function(){$("#b").trigger('click');}) 实现点击完i ...
- jq点击事件多次响应_jQuery单击事件触发多次
我试图用Javascript编写视频扑克游戏,以降低其基础知识,但是我遇到了一个问题,其中jQuery click事件处理程序多次触发. 它们被附加到用于下注的按钮上,并且对于在游戏过程中第一手下注( ...
- html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
- html地图无法点击,无法触发谷歌地图标记点击事件从HTML按钮
我尝试创建一个HTML按钮,可以触发谷歌地图上的标记的点击事件,所以每当我点击按钮,地图将自动放大到标记和显示infowindow.这里是我的代码无法触发谷歌地图标记点击事件从HTML按钮 Semua ...
- 微信小程序只允许触发一次点击事件(防止多次点击事件)
微信小程序只允许触发一次点击事件(防止多次点击事件) 超级简单 容易理解 可以让绑定的事件只触发一次 //.wxml <button bindtap="click1"> ...
- vue中进入页面,自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
- html5模拟点击事件,css3模拟jq点击事件的实例代码
今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签 ...
- Android 中触摸事件与点击事件分析
触摸事件 两种检测触摸事件的方式: 设置触摸监听 setOnTouchListener 返回 true: 表示消费事件 , 可以检测到 down/move/up 事件 返回 false: 不消费事件 ...
最新文章
- Linux 运维常用命令 find、awk、sed、grep、vi、ps、lsof、rpm
- android视频录制(调用系统视频录制)
- Vue项目登录成功后返回到原操作页面
- 获取汉字的首字母(转)
- ActiveState Komodo IDE v5.2.1.34168 最新版for Linux/Mac OS/Windows 全5大平台
- 尝鲜党:Nexus5、6刷安卓M教程
- Redis分布式锁,看完不懂你打我
- php基础教程 第十一步 面向对象
- oracle创建表空间和用户授权
- 斯皮尔曼相关系数范围_Spearman Rank(斯皮尔曼等级)相关系数
- python已知三角形的顶点坐标,求任一顶点角度
- 网页占满整个屏幕_css设置网页占满屏幕
- 微信搜一搜中的智能问答技术
- 【企业】读纸牌屋,把握人性
- JS 无形装逼,最为致命
- oracle xla相关,【EBS】XLA_GLT表的清理
- svchost.exe 占用 21 端口,无法开启FTP服务(已解决)
- 手机通过usu共享给电脑网络(win10),电脑变卡的解决办法
- 拼多多 2020校园招聘 二维表第k大数(二分)
- 如何显示计算机语言栏,win10语言栏不见了,win7如何显示语言栏
热门文章
- 【CIPS 2016】(11-12章)信息检索、信息推荐与过滤 (研究进展、现状趋势)
- 朋友圈计算机代码,微信小程序仿朋友圈代码
- html菜单树实现原理,HTML_DIV+CSS构成树型菜单,这是用DIV+CSS+JS构成的树型菜单 - phpStudy...
- HTML之绝对定位Absolute
- C语言陷阱之逗号表达式
- 线性代数(14): 对称矩阵与矩阵的SVD分解
- TCP协议详解及交换机路由器概念
- JavaScript动态绑定事件
- 用R语言做正态分布检验
- 照明用哪种灯比较护眼?推荐专业的护眼照明灯