• 推荐使用最新版火狐浏览器或Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

HTML添加响应事件

Web开发 紫鹰 4年前 (2020-11-05) 2698次浏览 0个评论 扫描二维码

HTML添加响应事件

HTML添加响应事件

常见方法:

<button type="submit" id="btn" οnclick="btn()">btn</button>
function btn()
{
}

不推荐使用,原则上HTML代码只能体现网页的结构,具体的行为应该使用javascript代码进行绑定。

<button type=" submit" id=" btn"> btn</button>

第一种方法:

$("#btn").click(function(event){ .... }

第二种方法:

document.getElementById('#btn').addEventListener('click', function() {  
....
});

第三种方法:

$('#btn').bind('click', function(e){ .... });

第四中方法:

$("btn").on("click",function(e){ ..... });

第一种和第二种的效果是一样,可以附加多个事件处理函数,并不是只有使用jquery才能做到;
如果项目中统一使用jQuery的话,建议使用第一种做法,顺便还解决了IE的不兼容问题。

CSS 方法:

CSS 文件中定义:

.navbar-custom .button-menu-mobile {
border: none;
color: #ced4da;
display: inline-block;
height: 70px;
line-height: 70px;
width: 60px;
background-color: transparent;
font-size: 24px;
cursor: pointer
}

JS 文件中使用:

$('.button-menu-mobile').on('click', function (event){ ..... });

版权所有丨如未注明 , 均为原创丨
转载请注明原文链接:HTML添加响应事件
喜欢 (10)
[谢谢打赏!]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址