Js事件

zwq 2011-11-20

    1. Js中的事件句柄

     在Js中，事件句柄的名称是以“on”开头的，如onload, onclick这类。事件句柄可以当做HTML标签的属性来使用：

<!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=gb2312" />
<title>Tests</title>
<script language="javascript" type="text/javascript">
function test(){
var str = "hello";
alert(str);
}
</script> 
</head>
<body onload = "test();">  
<h1>test</h1>
</body>
</html>

    这样做就是把load事件和test()函数关联起来。我们把这种写法叫做inline model(内联模式).

<!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=gb2312" />
<title>Tests</title>
</head>
<body onload = "var str = 'hello2';alert(str);">  
<h1>test</h1>
</body>
</html>

    你要写成上面不用函数的形式也是可以的，但是最好使用函数，这样看起来代码清爽点。

    另外，还有一种方法，用于访问事件句柄，又称传统模式：

<!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=gb2312" />
<title>Tests</title>
<script language="javascript" type="text/javascript">
function test(){
var str = "hello";
alert(str);
}
window.onload = test;
</script> 
</head>
<body>  
<h1>test</h1>
</body>
</html>
 
zwq

zwq

相关推荐

WebAssembly及其 API 的完整介绍

自从引入计算机以来，本地应用程序的性能有了巨大的提高。相比之下，web 应用程序相当慢，因为 JS 一开始并不是为了速度而构建的。但是由于浏览器之间的激烈竞争以及JS 引擎如V8的快速开发，使得 JS 能够在机器上快速运行。但是它仍然不能超过本机应用程

88274956 / 15评论 2020-11-03

通过构建自己的JavaScript测试框架来了解JS测试

测试是编程中非常重要的一部分。在当今的软件开发中，单元/功能测试已成为软件开发的组成部分。随着Nodejs的出现，我们已经看到了许多超级JS测试框架的发布：Jasmine，Jest等。这有时也称为隔离测试，它是测试独立的小段代码的实践。如果你的测试使用某些

runner / 0评论 2020-09-01

想要在JS中把正则玩得飘逸，学会这几个函数的使用必不可少

在之前的一系列文章中，我们讲解了很多关于正则表达式的知识。那么作为一个前端工程师，如果想要把这些知识应用到我们平时的开发中去的话，就需要知道在JavaScript中，能够使用正则的函数有哪些？然后它们各自的功能是什么？有哪些需要注意的地方？只有掌握好了每一

梦的天空 / 0评论 2020-08-25

js实现表格单列按字母排序

本文实例为大家分享了js实现表格单列按字母排序的具体代码，供大家参考，具体内容如下。<link href="../css/表格数据搜索.css" rel="stylesheet">. <input

移动开发与培训 / 0评论 2020-08-16

js实现表格数据搜索

<input type="text" placeholder="搜索..." id="myInput" onkeyup="myFunction()">

ReunionIsland / 0评论 2020-08-16

浅谈AjaxPro.dll,asp.net 前台js调用后台方法

Ajax是异步Javascript和XML的英文缩写。"Ajax"这个名词的发明人是Jesse James Garrett,而大力推广并且使Ajax技术炙手可热的是Google。Ajax的核心理念在于使用XMLHttpRequest对象

lyqdanang / 0评论 2020-08-16

前端 HTMLTestRunner中JS的用法

--...--> 注释标签用来在源文档中插入注释。这些信息对用户是不可见的，但是对程序来说是可用的。这样就可避免不支持脚本或样式的老浏览器把它们显示为纯文本。命令行最后的两个正斜杠（//）是 JavaScript 注释符号。这确保了 JavaScri

MyNameIsXiaoLai / 0评论 2020-07-08

gulp 构建 demo

var cleanCss = require; // 压缩 css. var livereload = require;//自动编译。gulp.task("server", [‘default‘],function(){//配置热更新服

星辰的笔记 / 0评论 2020-07-04

SpringBoot入门二十五,默认的404错误页面引入css和js文件

Springboot默认的404,500等页面的位置在static的error中,可以直接访问,无需单独编写映射器。如果我们想美化一下这些错误提示页面,那么static下面css中的文件是不能直接饮用的,因为根据错误发生时路径的层级不同,错误页面的层级也会

csstpeixun / 0评论 2020-06-28

selenium键盘操作，执行JS，上传文件

selenium内置了执行js代码的api。# ----------------------------通过js代码修改元素的属性--------------------. return ‘操作完了‘;# -----------------------通过

letheashura / 0评论 2020-06-26

JS事件、Bom对象和Dom对象（1）（乐字节架构）

如需要跟多资料请点击右侧 → 这是一条不归路，有秃头风险，请慎重选择！事件 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

liaoxuewu / 0评论 2020-06-26

python 爬虫遇到 Cloudflare 邮箱加密

最近写一个小爬虫，需要拿到邮箱信息，发现拿不到，也不是ajax接口。最后查资料发现是被Cloudflare加密起来了，有加密肯定有解密。for e += ‘%’ + .slice;前面的 2 位数字转化成 16 进制之后就是秘钥, 接下来的每两位字符跟秘

sunzhihaofuture / 0评论 2020-06-21

ES6-Babel-Browserify模块化教程

备注：第一步操作后Babel将es6的模块化语法，转换成了CommonJS模块化语法，所以需要第二步用Browserify再次编译。ES6的模块化分为导出与导入两个模块。在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如

FEvivi / 0评论 2020-06-16

【AJAX】Asynchronous JavaScript And XML （非同步的JS &amp; XML）

AJAX 即“Asynchronous Javascript And XML”。是指一种创建交互式网页应用的网页开发技术。ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。网页不刷新的情况下，从服务器中获取数据的解决方案。-　url ，你

坚持着执着 / 0评论 2020-06-16

原生JavaScript(JS)修改添加CSS样式表 （更好的性能）

所以样式排序稍微麻烦点，但你可以很轻松地想出办法定位的。更多用法，自己把 css0 打印出来就知道了，我只是搞后端的，你问我我也不懂。

waterv / 0评论 2020-06-14

JS原型对象操作实例分析

本文实例讲述了JS原型对象操作。分享给大家供大家参考，具体如下：。打开浏览器，输入fn，会发现fn有一个prototype(原型)属性，这个属性是一个指针，指向原型对象，这个对象包括了特定类型所有共享的属性和方法。换句话说，prototype对象包含了函数

xiaoge00 / 0评论 2020-06-14

js实现mp3录音通过websocket实时传送+简易波形图效果

废话不多说下面讲一下需求。需求：公司要求实现web端的录音并通过websocket实时上传至java后台，而且能通过vlc实时播放，简单一点讲就是我用网页在那一边讲话，一个大喇叭就能实时把我的话播出去，这样是不是通俗易懂呀，而且呢公司要求用mp3格式。后半

firejq / 0评论 2020-06-14

详解用js代码触发dom事件的实现方案

前端编写测试用例时，在测试界面上的一些效果时，通常都希望能够模拟一些用户操作，而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法，例如click、focus等，但是如果是其他的事件，例如mousedown、mouseu

firstboy0 / 0评论 2020-06-14

uglifyjs 合并压缩 js, clean-css 合并压缩css

本文主要介绍如何通过CLI命令行实现 js和css的合并压缩。这一步就不多说了，下载node自行安装。上面的命令表示把common.js和example.js合并成为common.min.js。这里面的路径请根据你项目的实际情况更改。

e度空间 / 0评论 2020-06-12

gulp js文件压缩 es6 代码转换

// 暂时用下面这个 npm install gulp-babel @babel/core @babel/preset-env. gulp jsmin-------------------------------------- // 代码压缩npm ins

zhongweinan / 0评论 2020-06-10

webpack 之压缩js代码 和html文件

2.压缩html文件，html文件不需要处理兼容问题，压缩文件只需要在plugins中的HtmlWebpackPlugin中配置minify即可

gufudhn / 0评论 2020-06-06

js 语法检查

eslint 使用 airhub 检查： eslint-config-airbnb 和eslint-config-airbnb-base. eslint-config-airbnb 包含 ECMAScript 6 + 以及 React 的 ESLint 代

hualala / 0评论 2020-06-05

JS惰性删除和定时删除可过期的localStorage缓存，或sessionStorage缓存

使用localStorage可以在浏览器中存储键值对的数据。但是它们之间的区别是：存储在localStorage的数据可以长期保留；而当页面会话结束时，存储在sessionStorage的数据会被清除。另外需要注意的是，localStorage中的键值对总

拭血 / 0评论 2020-06-02

JS实现HTML标签转义及反转义

简单说一下业务场景，前台用户通过input输入内容，在离开焦点时，将内容在div中显示。这时遇到一个问题，如果用户输入了html标签，则在div显示中，标签被解析。由于是纯前端操作，不涉及后端，因此需要通过js对输入内容进行转义。因为innerText会获

nercon / 0评论 2020-06-02

js的代入感

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。可能是语法错误，通常是程序员造成的编码错误或错别字。可能是拼写错误或语言中缺少的功能。可能是由于来自服务器或用户的错误输出而导致的错误。当然，也可能是由于许多其他不可预知的因

sunlizhen / 0评论 2020-06-01

JS有这三种写法

<button οnclick="alert;">今天天气?</button>. <script></script>标签中的js代码一版写在文档的尾部；网页是从上而下加载的，而js代码通常

麋鹿麋鹿迷了路 / 0评论 2020-05-29

JS leetcode 最大连续1的个数 题解分析

今天来做一道十分烦躁的题目，为什么烦躁，因为我字母写错了提交了三次错了三次！！！我的leetcode正确率大大下降！！给定一个二进制数组， 计算其中最大连续1的个数。解释: 开头的两位和最后的三位都是连续1，所以最大连续1的个数是 3.输入数组的长度是正整

zangdaiyang / 0评论 2020-05-27

html里直接引用es6的js代码(不通过webpack等打包工具)

import { q } from ‘mymodule‘;

helloxiaoliang / 0评论 2020-05-20

【JS】JavaScript 脚本的三种使用形式：行内脚本、内部脚本、外部脚本

将 js 脚本嵌入到 HTML 标签中。<img alt="选手3" src="images/3.jpg" onclick="alert"/><br />. 将 JavaS

ThinkingLink / 0评论 2020-05-20

JS进行Base64编码,MD5加密,URL编码实现快递鸟API接口签名验证

有网友留言说，想调用快递鸟API接口实现快递查询，但是又不懂后端开发，不懂JAVA，不懂PHP，不懂C#，也不懂python，问我能不实现快递接口查询，我说你会什么，他说,我只懂一点点JS，我回答他，已经足够了，我现在就来告诉你如何通过JS来实现600多家

coolhty / 0评论 2020-05-20

JS 解决安卓手机输入框被软键盘遮住的问题

安卓手机输入框被软键盘遮住的问题，如何在点击输入框的时候类似与IOS那种，输入框直接在软件盘的上面，而不会被遮住

chenjinlong / 0评论 2020-05-16

js中的正则表达式入门(大量实例代码)

什么是正则表达式呢？正则表达式描述了一种字符串匹配的模式，可以用来检查一个字符串是否含有某种子串、将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等。　js中使用正则表达式，除了了解正则表达式基本的匹配规则外。还需要了解下面的基本的知识：。pyt

lancanfei / 0评论 2020-04-11

浅谈js正则字面量//与new RegExp的执行效率

前几天谈了正则匹配 js 字符串的问题：《js 正则学习小记之匹配字符串》 和 《js 正则学习小记之匹配字符串优化篇》。里面讲到了优化正则起到提升性能的问题，但是能提升多少呢？于是我去测试了，发现TMD几乎微乎其微，我用1千字符串进行100万次匹配测试，

鹤啸九天 / 0评论 2020-04-08

JS端基于download.js实现图片、视频时直接下载而不是打开预览

const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];

87510793 / 0评论 2020-05-09

【小记事】如何设置vscode代码格式化时不要自动换行

最近一格式化就给我分好多行，好气哦(｀?

STPace / 0评论 2020-05-11

Js芝士点_One

1995 年 2 月，Netscape 公司发布 Netscape Navigator 2 浏览器，并在这个浏览器中免费提供了一个开发工具——LiveScript。由于当时 Java 比较流行，Netscape 便把 LiveScript 改名为 Java

ThinkingLink / 0评论 2020-05-11

html怎么和后端服务器数据交互

我们知道页面和服务器交互的核心是JS ， 各个前端框架的底层都是JS 。先说说JSP和HTML的区别 。JSP是动态网页 ， 底层是servlet，JSP里面的JS代码都会先在服务器端执行 ，没有被执行过 ， 是在用户的电脑上执行JS代码去请求服务器，在传

PioneerFan / 0评论 2020-05-10

js获取富文本中的第一张图片(正则表达式)

后台发来一个富文本字符串里面可能包含了0、1、2、3…个图片标签,我们的任务是获取这个字符串里面第一张图片的url，如果没有图片则返回空。UE.getContentTxt() 可获取到编辑器中的纯文本内容，没有段落格式；写之前在网上找了很多方法，最简单的思

jollyhope / 0评论 2020-05-10

前端福利，用 JS 就能实现抖音养号等诸多功能

doomvsjing / 0评论 2020-05-08

html引入Javascript的方式

如果需要特别新增请另外新建标签）

xiaoge00 / 0评论 2020-05-07

JQuery入门+js库文件分享

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功

tthappyer / 0评论 2020-05-06

alpha冲刺—冲刺计划&amp;代码规范

自动化部署;用户模块接口实现；项目基础模块接口实现；项目任务模块接口实现；项目文件模块接口实现；项目群聊模块接口实现。文件管理功能界面完成html+css+js交互；群组聊天js;日程安排js;任务面板js;菜单栏、顶栏js交互；function matc

行吟阁 / 0评论 2020-05-03

vue-cli3关闭eslint语法检查

lintOnSave: false,warnings: true,

shilongdred / 0评论 2020-05-03

浅析 JS 中的作用域链

在 JS 中每个函数都有自己的执行环境，而每个执行环境都有一个与之对应的变量对象。思考为什么上面函数中的 fn 运行后输出 1，可能大家都知道，但是为什么会输出 1 呢，用上面的变量对象来理解就可以得出答案。这个 fn 就是函数 fn 对应的变量对象，我们

ChinaGuanq / 0评论 2020-05-01

JS事件循环机制

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题

Luffyying / 0评论 2020-04-24

理解Babel是如何编译JS代码的及理解抽象语法树(AST）

很多浏览器目前还不支持ES6的代码，但是我们可以通过Babel将ES6的代码转译成ES5代码，让所有的浏览器都能理解的代码，这就是Babel的作用。Babel的编译过程和大多数其他语言的编译器大致相同，可以分为三个阶段。比如我们在 .babelrc里配置的

zhongweinan / 0评论 2020-04-24

Ajax Bootstrap JSP .jsp JS .js DOM 概念

Ajax 即“Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后

WebVincent / 0评论 2020-04-20

2020年面向前端开发人员的10个很棒的 JS 库

虽然JavaScript本身很棒，但有它对应生态圈也很重要，这些圈会让 JS 更好。开发人员在开始一个新的中等项目时经常喜欢重新写轮子，这是一个糟糕的策略，使用第三方库是有意义的。因为这样的库有明确的用途，有更长生成的迭代，如果遇到问题更容易找到解决方法

hjucook / 0评论 2020-04-20

56岁潘石屹报名全国青少年编程能力等级测试，今陷Python难抽身

学Python，已知天命的潘石屹是认真的。2019年11月14日，56岁的潘石屹在生日当天宣布，进军编程语言Python。数月过去之后，Python的学习进程又如何了呢?学习Python已经3个月了，最近报了名参加4月19日Python编程一级考试，检验一

bcbeer / 0评论 2020-04-17

Js异步机制的实现

JavaScript是一门单线程语言，所谓单线程，就是指一次只能完成一件任务，如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯，坏处是只要有一个任务耗时很长，后面的任务都必须排队

angqiuli / 0评论 2020-04-16