事件绑定页面

最新推荐文章于 2022-11-30 11:34:18 发布

koukou0419

最新推荐文章于 2022-11-30 11:34:18 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/koukou0419/article/details/80978038

前端专栏收录该内容

72 篇文章

订阅专栏

本文详细介绍了HTML与JavaScript中事件绑定的方法，包括普通事件绑定、attachEvent和addEventListener的区别及使用场景，通过具体代码示例展示了如何在按钮点击事件中使用自定义函数实现多次绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

window.onload = function () {

var btn1 = document.getElementById('btn1');

//普通事件只能执行一次，多次写也会被覆盖

// btn1.onclick=function(){

// alert("a");

// }

// btn1.onclick=function(){

// alert("b");

// }

//事件绑定函数可重复写多次 attachEvent（）在火狐下不兼容

//addEventLister()在IE下不兼容

// if (btn1.attachEvent) {

// btn1.attachEvent('onclick', function () {

// alert("a");

// });

// btn1.attachEvent('onclick', function () {

// alert("b");

// });

// } else {

// btn1.addEventListener('click',function(){

// alert("a");

// },false);

// btn1.addEventListener('click',function(){

// alert("b");

// },false);

// }

//函数封装方式

myAddEvent(btn1,'click',function(){

alert("a");

})

myAddEvent(btn1,'click',function(){

alert("b");

})

}

</script>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

koukou0419

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【微信小程序】事件绑定和事件对象

云泽野の编程日记

06-04

3156

小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序不能通过on的方式绑定事件，也没有click等事件，小程序中绑定事件使用bind方法，click事件也需要使用tap事件来进行代替bind:事件名bind事件名事件处理函数需要写到.js文件中，在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面，我们可以直接在 Page 方法中创建事件处理函数。

HTML中绑定点击事件的方式

热门推荐

tylerlee008的专栏

01-22

3万+

HTML中为button绑定事件的方式有五种。例如以下标签： submit 一、使用jquery进行绑定 $('#btn_submit').click(function(){ }); 二、使用原生js绑定，（注意：Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Ope

参与评论您还未登录，请先登录后发表或查看评论

html--绑定事件方式

张默的博客

09-26

3777

例如以下标签： <button type="submit" id="btn_submit"> submit </button> 一、使用jquery进行绑定 $('#btn_submit').click(function(){ }); 二、使用原生js绑定，（注意：Internet Explorer 8 及更早IE版本不支持 addEventListener() 方...

前端学习（八）页面编写——页面绑定数据和事件

lsjweiyi的博客

07-25

851

接着前面的内容，前面只有一个样子，什么功能都没有，本文就是给他添加一下最基本的功能。一下是实现的代码（<template> <div> <p><span>账号：</span> <el-input v-model="form.username" placeholder="请输入手机号或邮箱" class="myInput"></el-input></p> <p><

html中绑定点击事件的三种方法

cdd9527的博客

11-30

1万+

html中绑定点击事件的三种方法

js实现同一个页面,多个enter事件绑定的示例

10-17

在JavaScript编程中，有时我们需要在同一个页面上为多...在本例中，我们学习了如何使用`onkeydown`事件和条件语句来实现同一个页面上多个Enter事件的绑定，以及如何使用`addEventListener`进行更现代和灵活的事件处理。

微信小程序页面跳转事件绑定的实例详解

08-29

微信小程序页面跳转事件绑定是小程序开发中非常重要的一部分，本文将详细介绍微信小程序页面跳转事件绑定的实例详解，包括事件的定义、事件分类、事件绑定等知识点。事件是什么？事件是视图层到逻辑层的通讯方式...

layui动态绑定事件的方法

10-16

在前端开发中，动态绑定事件是一项非常重要的技术，尤其是在处理动态创建的DOM元素时。...通过上述方法，即使是动态添加到页面上的元素，也能确保事件能够正确地绑定和触发，从而为用户带来良好的交互体验。

一种js统一绑定页面事件写法

qq_40085888的博客

01-04

740

$('span.btn[id]').each(function() { // 按约定检索是否有该事件。 var onClickFunction = window[this.id + 'Click']; if (onClickFunction) { $(this).on('click', onClickFunction); } }); <span class="bt...

如何给页面上的按钮绑定一个事件？

weixin_34292959的博客

06-03

3940

计划写一个例子系列来帮助前端新童鞋入坑，同时也梳理一下自己的知识体系。预计有30篇左右，本文是第一篇：如何给页面上的按钮绑定一个事件？文中的代码复制粘贴保存为html文件即可在Chrome里预览~ 这个例子实现的是在页面里有一个按钮，点击后弹出一个 Hello 弹窗。 1、原生实现 <html> <head> <title></title&g...

web-绑定event事件比较

前端产品工程师

12-26

848

HTML中为按钮绑定event方式有三种： eg： submit 一、使用jQuery进行绑定 $('#btn_submit').click(function(){}); 二、使用原生js绑定 document.getElementById("#btn_submit").addEventListener(‘click’, function(){ }

html 页面绑定事件,{HTML5}基础事件-绑定事件

weixin_39684495的博客

06-03

1208

JavaScript 有一个非常重要的功能，就是事件驱动。当页面完全加载后，用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。jQuery 为开发者更有效率的编写事件行为，封装了大量有益的事件方法供我们使用。一．绑定事件常用的事件有：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit...

js向页面新加入的html事件绑定

雷绍发

01-12

2885

js向页面append或者直接给$（'div'）.innerhtml="页面内容"；的时候页面内容里面的单机事件无法绑定怎么办呢 1：jquery1.4之前的直接用live方法，个人觉得不靠谱 $(".aaaaa").live('click',function(){ }); 2：直接在赋值的下面接着写事件，能够执行，效果可以达到，但是代码不够小清晰，维护

ajax动态加载页面，对页面的按钮绑定点击事件

DragonFangQy

11-17

1万+

如题，动态加载过来的内容不在开始就加载的页面中，所以绑定事件无效。开始使用 $("#site_add").click(addSite(userid)); 无效去网上逛了一圈回来，说是用.on 绑定 $("#site_add").on("click", addSite(userid)); 无效

js代码触发事件　函数列表

10-19

2797

onabort 当用户中断下载图像时触发。 onactivate 当对象设置为活动元素时触发。 onafterprint 对象所关联的文档打印或打印预览后立即在对象上触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecopy 当选中区复制到系统剪贴板之前在源对象触发。

网页中事件绑定的三种方式

weixin_34233421的博客

06-21

312

在web中，事件在浏览器窗口中被触发的并且通常被绑定到窗口内部的特定部分-可能是一个元素、一系列元素、被加载到这个窗口的HTML代码或者整个浏览器窗口。举几个可能发生的不同事件：用户在某个元素上点击鼠标或者悬停鼠标用户在键盘中按下某个按键用户调整浏览器窗口的大小或者关闭浏览器一个网页停止加载提交表单播放或暂停或关闭视频发生...

不熟悉页面，如何获取页面元素绑定的事件，同时查看js代码。

cc_百川

09-06

6962

例如我想看：https://www.e-cology.com.cn/的登录页面，登录按钮的事件第一种方法第一：f12/ctrl+shift+i/调出开发者工具第二：按照下图 &nbsp; &nbsp; &nbsp; 3.这里可以直观的看到这里onclick调用了checkall()函数（执行第三操作），或者点击3.1可以看到这里的click函数，点击4即可跳转到这...

Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式

https://github.com/JelinYao

10-12

2万+

方法一：使用document对象查找所有的按钮 //按照dom的方式添加事件处理 function BindByDom() { try{ var htmlBtns = document.getElementsByTagName('button');//获取HTMLCollection对象集合

[微信小程序]页面事件绑定

qq_39509597的博客

12-27

1841

Page 中可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。 <view bindtap="viewTap">click me</view> Page({ viewTap() { console.log('click me!') } }) 就是类似onclick事件，在page里写...