JavaScript事件方法(实例讲解)

废话不多说，直接上代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div{
background-color:lightblue;
margin:5px;
padding:5px;

}
</style>
<script src="Scripts/EventUtil.js" type="text/javascript"></script>
<script type="text/javascript">
var changeSize = function () {
var oTxt = document.getElementById('txt');
oTxt.size += 5;
}

var showMessage = function () {
alert('单击事件');
alert('事件类型：' + event.type);
}

window.onload = function () {
document.getElementById('btn1').onclick =
function () {
alert('btn1单击事件');
}
}
</script>
</head>
<body>
<input type="text" id="txt" size="10"/>
<input type="button" value="加长" onclick="changeSize()"/>
<input type="button" value="点我" onclick="showMessage()"/>
<input type="button" id="btn1" value="按钮" />

<p> 只有三次抽奖机会！ </p>
<input id="btnLottery" type="button" value="抽奖"/>
<div id="divResult">

</div>
<script type="text/javascript">
var times = 0; //次数
var arr = ['一千万', '女神一枚', '布加迪威龙', '海景别墅', '全英雄全皮肤','无限充值','逢赌必赢'];

var btnLottery = document.getElementById('btnLottery');
btnLottery.onclick = function () {
if(times >= 3)
{
alert("你已经抽完三次了！");
this.onclick = null;
return;
}
times++;
var n = Math.floor(Math.random() * arr.length); //数组中随机抽一个
var divResult = document.getElementById('divResult');
divResult.innerHTML = "<p>您是第"+ times +"次抽奖，抽中的是："+ arr[n] +"</p>"
}
</script>

<input type="button" id="btnDOM2Test" value="测试DOM2事件处理"/>
<input type="button" id="btnDelDOM2Test" value="测试DOM2删除事件处理"/>
<script type="text/javascript">
var sayHi = function () {
alert('Hello!');
}

var btnDOM2Test = document.getElementById('btnDOM2Test');
btnDOM2Test.addEventListener('click', function () {
alert('您单击的是：' + this.value);
}, false);

btnDOM2Test.addEventListener('click', sayHi, false);

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

var del = function () {
btnDOM2Test.removeEventListener('click', function () {
alert('您单击的是：' + this.value);
}, false);
btnDOM2Test.removeEventListener('click', sayHi, false);
}
btnDelDOM2Test.addEventListener('click', del, false);

//IE9+
//btnDOM2Test.attachEvent("onclick", sayHi);
//btnDOM2Test.attachEvent("onclick", function () {
// alert("IE事件绑定!");
//});
</script>

<label for="txtPhoneNum">请输入手机号码</label>
<input type="text" id="txtPhoneNum"/>
<script type="text/javascript">
var txtPhoneNum = document.getElementById('txtPhoneNum');
EventUtil.addHandler(txtPhoneNum, 'keypress', function () {
var e = EventUtil.getEvent();
//alert(e.keyCode);
//都不是数字
if (e.keyCode < 48 || e.keyCode > 57) {
EventUtil.preventDefault(e);
}
});
</script>

<form id="frmDemo" action="submitPage.htm">
<h3>用户登录</h3>
<label for="txtUID">账号：</label>
<input type="text" id="txtUID"/><br />
<label for="txtPWD">密码：</label>
<input type="password" id="txtPWD"/><br />
<input type="button" id="btnSubmit" value="登录"/>
</form>

<script type="text/javascript">
var txtUID = document.getElementById('txtUID');
var txtPWD = document.getElementById('txtPWD');
var btnSubmit = document.getElementById('btnSubmit');
var frmDemo = document.getElementById('frmDemo');

EventUtil.addHandler(btnSubmit, 'click', function () {
alert('我提交了！');
if (txtUID.value == "admin") {
frmDemo.submit(); //提交
}
else {
return;
}
});

EventUtil.addHandler(txtUID, 'keydown', function () {
var e = EventUtil.getEvent(); //Enter.keyCode = 13;
if (e.keyCode == 13) {
txtPWD.focus();
EventUtil.preventDefault(e);
}
});
</script>

<div onclick="this.style.backgroundColor='red'; event.cancelBubble=true;">div1
<div onclick="this.style.backgroundColor='blue';">div2
<div onclick="this.style.backgroundColor='black';">div3
</div>
</div>
</div>
</body>
</html>

以上这篇JavaScript事件方法(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript事件处理的方式(三种)

    JavaScript事件处理的方式(三种)

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,特此分享到我们平台供大家参考下! 一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是Web浏览器中发生的事情,比如说某个Web页面

  • JavaScript每天必学之事件

    JavaScript每天必学之事件

    其实这篇文章挺早之前就写了,但是由于sf保存方面的bug,所以当时写了一大堆,结果没保存,觉得这个没写完是个不小的遗憾,今天正好有空,就给补充下了,也正好给我的javascript学习总结做一个完结篇. 这里,主要讨论一下js相关的事件-- 事件处理程序 在DOM中定义了一些事件, 而响应某个事件的函数就叫事件处理程序(或事件侦听器).事件处理程序的名字一般以"on"开头,例如:onclick等 事件冒泡与捕获 事件流指的是页面中接收事件的顺序,IE,火狐和chrome浏览器都是事件冒

  • 关于JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX="" 来绑定.举个例子: <input type="button" value="点我呦" onclick="aler

  • 详解javascript事件绑定使用方法

    由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所出现的错误.如果有多个javascript文件,那么极有可能出现多个window.onload事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了. IE方式 attachEvent(事件名称, 函数),绑定事件处理函数 detachEvent(事件名称, 函数),解除绑定 DO

  • JavaScript中点击事件的写法

    <button id="btn">click</button> var btn=document.getElementById('btn'); 第一种: btn.onclick=function(){ alert('hello world'); } 消除事件:btn.onclick=null;//就不会弹出框了 第二种: btn.addEventListener('click',function(){alert('hello world')},false); b

  • JavaScript事件方法(实例讲解)

    废话不多说,直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text

  • Javascript操作表单实例讲解（下）

    Javascript操作表单实例讲解（下）

    在上篇文章给大家介绍了js操作表单实例讲解(下)的相关知识,本文接着给大家介绍Javascript操作表单实例讲解(下),具体详情如下所示: 一.文本域 <input type="text" /> ----------------------------- 操作文本域的值 value 属性 设置或者获取值 ----------------------------- 二.单选按钮和多选按钮 <input type="radio" /> <

  • javascript帧动画(实例讲解)

    javascript帧动画(实例讲解)

    前面的话 帧动画就是在"连续的关键帧"中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容.本文将详细介绍javascript帧动画 概述 [分类] 常见的帧动画的方式有三种,包括gif.CSS3 animation和javascript git和CSS3 animation不能灵活地控制动画的暂停和播放.不能对帧动画做更加灵活地扩展.另外,gif图不能捕捉动画完成的事件.所以,

  • 对vue 键盘回车事件的实例讲解

    如果是原生的input,使用 @keyup.enter就可以,若是使用了element-ui,则要加上native限制符,因为element-ui把input进行了封装,原事件就不起作用了,代码如下: <input v-model="form.name" placeholder="昵称" @keyup.enter="submit"> <el-input v-model="form.name" placehol

  • JavaScript操作表单实例讲解(上)

    一.获得表单引用 1>通过直接定位的方式来获取 document.getElementById(); document.getElementsByName(); document.getElementsByTagName(); 2>通过集合的方式来获取引用 document.forms[下标] document.forms["name"] document.forms.name 3>通过name直接获取"(只适用于表单) document.name 二.获得

  • 各种选择框jQuery的选中方法(实例讲解)

    select下拉列表的选中方法是:$("slect option:eq(1)").attr("selected",true);//选中第二个option chekbox的选中方法:$("[value=check1"]:checkbox).attr("checked",true); radio的选中方法:$("[value=radio2"]:radio).attr("checked",tr

  • vue父组件点击触发子组件事件的实例讲解

    最近在学习Vue父子组件通信的问题,刚好遇到一个父子之间事件事件派发与接收,在这里记录一下,在这里我使用的是ref 给子组件注册引用信息.官网是这样解释的 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例: 父组件app.vue <template> <div id="app"> <!--父组件--> <

  • JavaScript数组常用方法实例讲解总结

    JavaScript数组常用方法实例讲解总结

    目录 数组常用方法 concat() 方法 join() 方法 pop() 方法 push() 方法 reverse() 方法 shift() 方法 slice() 方法 sort() 方法 splice() 方法 toSource() 方法 toString() 方法 toLocaleString() 方法 unshift() 方法 valueOf() 方法 导读:在实际开发中,前端工程师除了写页面布局及样式还要对后端返回的数据进行处理,返回的数据大多数是json格式,一般都是返回一个对象或者

  • JavaScript Class类实例讲解

    目录 Class类 初识class class中getter和setter设置 表达式方式书写 静态属性与静态方法 私有属性和私有方法 class继承 静态属性和方法继承 私有属性和方法继承 class显示原型与隐式原型关系 Class类 ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰,更像面向对

  • jq源码解析之绑在$,jQuery上面的方法(实例讲解)

    1.当我们用$符号直接调用的方法.在jQuery内部是如何封装的呢?有没有好奇心? // jQuery.extend 的方法 是绑定在 $ 上面的. jQuery.extend( { //expando 用于决定当前页面的唯一性. /\D/ 非数字.其实就是去掉小数点. expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ), // Assume jQuery is ready wit

随机推荐