浅析js绑定事件的常用方法


Posted in Javascript onMay 15, 2016

浅析js绑定事件的常用方法 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS事件绑定</title>
<script type="text/javascript">
/**
 * 绑定事件的方式:用事件属性绑定事件函数
 * 优点:1:完成行为的分离 
 * 2:便于操作当事对象,因为function是作为on***的属性出现的,可直接用this引用当事对象。
 * 3:方便读取事件对象,事件触发时系统自动把事件对象传递给事件函数,已其一个来传
 */	
  window.onload=function(){
  	 var k=document.getElementById('k').onclick=function(event){
	 var jj=document.getElementById('jj');
	   jj.style.top=event.clientX+'px';
		 jj.style.left=event.clientY+'px';
	 }
  } 
  
</script>
<style>
	#k{width:60px;height:80px; background-color:#80ffff;}
	#jj{width:60px ;height:80px;background-color:#ffff00;z-index:1000;position:absolute;}
</style>
</head>
<body>
<div id="k"></div>
<div id="jj"></div>	
</body>
</html>

以上这篇浅析js绑定事件的常用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
Vue底层实现原理总结
Feb 17 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
js添加事件的通用方法推荐
May 15 #Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 #Javascript
JQuery validate插件Remote用法大全
May 15 #Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 #Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 #Javascript
js阻止浏览器默认行为的简单实例
May 15 #Javascript
js添加绑定事件的方法
May 15 #Javascript
You might like
PHP实现货币换算的方法
2014/11/29 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
alert中断settimeout计时功能
2013/07/26 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
初学python数组的处理代码
2011/01/04 Python
python cookielib 登录人人网的实现代码
2012/12/19 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
python导入pandas具体步骤方法
2019/06/23 Python
python安装pil库方法及代码
2019/06/25 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
新兵入伍心得体会
2014/09/04 职场文书
学习考察心得体会
2014/09/04 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python