事件总结

tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
以上全是.下面分别介绍一下.
tabindex--
<input tabindex="9" type="taxt" size="20">
//设置按tab键移动的顺序
accesskey--
<input id="female" accesskey="f" type="radio" name="Sex" value="Female" />
//设置或返回访问单选按钮的快捷键,注释:请使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点。
onfocus--
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="yellow"
}
</script>
 <input type="text" onfocus="setStyle(this.id)" id="fname" />
//事件在对象获得焦点时发生,
onblur--
<script type="text/javascript">
function upperCase(){
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
输入您的姓名:<input type="text" id="fname" onblur="upperCase()" />
//事件会在对象失去焦点时发生
onselect--
Select text: <input type="text" value="Hello world!"
onselect="alert(‘You have selected some of the text.‘)" />
<br /><br />
Select text: <textarea cols="20" rows="5"
onselect="alert(‘You have selected some of the text.‘)">
Hello world!</textarea>
//事件会在文本框中的文本被选中时发生
onchange--
<script type="text/javascript">
function upperCase(x){
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
输入您的姓名:<input type="text" id="fname" onchange="upperCase(this.id)" />
//事件会在域的内容改变时发生
onclick--
<button onclick="document.getElementById(‘field2‘).value=document.getElementById(‘field1‘).value">Copy Text</button>
//事件会在对象被点击时发生。请注意, onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。
ondblclick--
<button ondblclick="document.getElementById(‘field2‘).value=document.getElementById(‘field1‘).value">Copy Text</button>
//事件会在对象被双击时发生
onmousedown--
<img src="/i/example_mouse2.jpg" onmousedown="alert(‘You clicked the picture!‘)" />
//事件会在鼠标按键被按下时发生
onmouseup--
<img src="/i/eg_mouse2.jpg" alt="mouse" onmouseup="alert(‘您点击了图片!‘)" />
//事件会在鼠标按键被松开时发生
onmouseover--
<img src="/i/eg_mouse2.jpg" alt="mouse" onmouseover="alert(‘您的鼠标在图片上!‘)" />
//时间会在鼠标指针移动到指定的对象上时发生
onmousemove--
<img src="/i/eg_mouse2.jpg" alt="mouse" onmousemove="alert(‘您的鼠标刚才经过了图片!‘)" />
//事件会在鼠标指针移动时发生
onmouseout--
<img src="/i/example_mouse2.jpg" alt="mouse" onmousemove="alert(‘您的鼠标刚才离开了图片!‘)" />
//事件会在鼠标指针移出指定的对象时发生
onkeypress--
<script type="text/javascript">
function noNumbers(e){
var keynum
var keychar
var numcheck
if(window.event) // IE
  {
  keynum = e.keyCode
  }
else if(e.which) // Netscape/Firefox/Opera
  {
  keynum = e.which
  }
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<input type="text" onkeypress="return noNumbers(event)" />
//事件会在键盘按键被按下并释放一个键时发生
onkeydown--
<script type="text/javascript">
function noNumbers(e){
var keynum
var keychar
var numcheck
if(window.event) // IE
  {
  keynum = e.keyCode
  }
else if(e.which) // Netscape/Firefox/Opera
  {
  keynum = e.which
  }
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<input type="text" onkeydown="return noNumbers(event)" />
//事件会在用户按下一个键盘按键时发生
onkeyup--
<script type="text/javascript">
function upperCase(x){
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
输入您的姓名: <input type="text" id="fname" onkeyup="upperCase(this.id)" />
//事件会在键盘按键被松开时发生
onreset--
<form onreset="alert(‘The form will be reset‘)">
Firstname: <input type="text" name="fname" value="John" />
Lastname: <input type="text" name="lname" />
<input type="reset" value="Reset">
</form>
//事件会在表单中的重置按钮被点击时发生
onabort --
<img src="image_w3default.gif" onabort="alert(‘Error: Loading of the image was aborted‘)" />
//事件会在图像加载被中断时发生。当用户在图像完成载入之前放弃图像的装载(如单击了 stop 按钮)时,就会调用该句柄。
onerror--
<img src="image.gif" onerror="alert(‘The image could not be loaded.‘)" />
//事件会在文档或图像加载过程中发生错误时被触发。在装载文档或图像的过程中如果发生了错误,就会调用该事件句柄。
onresize--
<body onresize="alert(‘You have changed the size of the window‘)"></body>
//事件会在窗口或框架被调整大小时发生
onsubmit--
<form name="testform" action="jsref_onsubmit.asp" onsubmit="alert(‘Hello ‘ + testform.fname.value +‘!‘)">
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
//事件会在表单中的确认按钮被点击时发生
onunload--
<body onunload="alert(‘The onunload event was triggered‘)"></body>
//事件在用户退出页面时发生
onload--
<body ></body>
//事件会在页面或图像加载完成后立即发生

时间: 2024-11-10 00:57:09

事件总结的相关文章

移动端点击事件全攻略,有你知道与不知道的各种坑

看标题的时候你可能会想,点击事件有什么好说的,还写一篇攻略?哈哈,如果你这么想,只能说明你too young to simple. 接触过移动端开发的同学可能都会面临点击事件的第一个问题:click事件的300ms延迟响应.不能立即响应给体验造成了很大的困扰,因此解决这个问题就成为了必然. 这个问题的解决方案就是: zepto.js的tap事件.tap事件可以理解为在移动端的click事件,而zepto.js因为几乎完全复制jQuery的api,因此常常被用在h5的开发上用来取代jquery.

js监控微信浏览器的自带的返回事件

pushHistory(); window.addEventListener("popstate", function(e) { e.preventDefault(); //alert("我监听到了浏览器的返回按钮事件啦"); //根据自己的需求实现自己的功能 //window.location = 'http://www.baidu.com'; pushHistory(); }, false); function pushHistory() { var state

微信小程序学习总结(2)------- 之for循环,绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

touchstart和touchend事件

touchstart和touchend事件 移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用. 由于公司的需要,最近也在开发移动web,对于一个没有移动开发经验的人来说,其实也是比较困恼的一件事情.对于移动web开发目前主要是基于webkit内核的浏览器.在webkit内核的环境下开发,你可以充分的运用html5+css3,还有它的一些私有属性.这让我很兴奋.可是,毕竟,对于一个长期习惯pc端做固定像素开

苹果手机输入中文不会触发onkeyup事件

今天同事的项目有这个问题,用我的安卓手机输入中文是ok的,但是苹果手机就不行 使用keyup事件检测文本框内容:  $('#keyup_i').bind('keyup', function(){         $('#keyup_s').text($(this).val());  } 本来是上面这种处理方式,现在改成下面这样就ok了 使用oninput以及onpropertychange事件检测文本框内容:  //先判断浏览器是不是万恶的IE,没办法,写的东西也有IE使用者       var

离散事件模型

0x01 代码框架逻辑 模拟内容: 1.离散事件模拟,模拟银行营业时的排队情况 2.不考虑顾客中途离开,顾客到达事件随机,业务办理时间 3.长度随机,选择最短的队排队,不再换队 代码逻辑: 1.一个事件链表,四个窗口排队队列 2.事件驱动:每有一个新的顾客到达,将产生下一个新顾客到达的新事件按时间顺序从小到大(OccurTime)插入事件链表(EventList) (如果此时窗口队列只有 一个顾客,还将产生此顾客离开事件插入事件链表中)      每有一个顾客从某一队列首离开,将产生他的后一位顾

zepto事件

1.zepto的定义 Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api 2.zepto与jq的区别 ①相同点:Zepto最初是为移动端开发的库,是jQuery的轻量级替代品,因为它的API和jQuery相似,而文件更小:zepto的API大部分都能和jQuery兼容,所以用起来极其容易 ②不同点: (1).针对移动端程序,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件) (2),Dom操作的区别:添加id时jQ

15.1-全栈Java笔记:Java事件模型是什么?事件控制的过程有哪几步??

应用前边两节上一章节的内容,大家可以完成一个简单的界面,但是没有任何的功能,界面完全是静态的,如果要实现具体功能的话,必须要学习事件模型. 事件模型简介及常见事件模型 对于采用了图形用户界面的程序来说,事件控制是非常重要的. 一个源(事件源)产生一个事件并把它(事件对象)送到一个或多个监听器那里,监听器只是简单地等待,直到它收到一个事件,一旦事件被接收,监听器将处理这些事件. 一个事件源必须注册监听器以便监听器可以接收关于一个特定事件的通知. 每种类型的事件都有其自己的注册方法,一般形式为: v

RecyclerView动态添加、删除及点击事件

上一节讲解了RecyclerView的三种显示方式,本节将主要研究一下RecyclerView的动态添加.删除及其单击和长按事件的处理.我们在上一节代码的基础上进行相关操作. 一.修改适配器类MyAdapter,加入添加和删除这两个方法: public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> { private Context context; private List<String>

事件(1)

事件三要素 事件源:事件发生的来源 事件:行为(点击,触摸...) 监听器:当事件发送时,所要做的事情  onClickListener(单击事件) 组件.setOnClickListener(new OnClickListener(){ @Override public void onClick(View v) { String str=et.getText().toString(); tv.setText(str); } }); 1 public class Click extends Ac