「网易官方」极客战记（codecombat）攻略-网页开发2-点击-clickthrough

2021-02-21 01:18

阅读：651

标签：一个开发回调 bat text function cal 官方使用

(点击图片进入关卡)

互动元素是网络的主旨！

简介

您可以使用 .on() 函数将事件绑定到某些元素。

element.on("click", functionName)

默认代码

// 请记住只有JavaScript进入

// 这将按钮的文字颜色设置为"blue"”。

var button = $("#theButton");

// 该按钮被点击时，该功能将运行。

function buttonClicked() {

// 这将按钮的文字颜色设置为"blue"”。

button.css("color", "blue");

// 使用.css（）设置按钮的 "background-color"

}

// ".on()" ”用于将事件挂接到元素。

// 现在，按钮将运行按钮点击…

// ...在"click"时发挥作用。

button.on("click", buttonClicked);

/* 记住只有CSS规则放在&tSyt>标签内 */

body {

text-align:center;

}

#theButton {

width: 500px;

height: 125px;

font-size: 3em;

}

概览

事件

事件是在网站使用过程中发生一些事情，例如按钮被点击的 "click" 事件、鼠标经过图片的 "mousemove" 事件等等。

我们可以使用 eventlistener （事件监听器）和这些事件进行"hook"（挂接）。jQuery有一系列工具，能让这些工作变得更加轻松。其中最简单的是 on() 函数。

对于任意元素， on() 会监听特定事件的发生，然后调用指派的 callback （回调）函数。

on(eventName, functionName)

on() 的结构很简单， on(eventName, functionName) 。 eventName 是一个字符串，是要监听的事件的名称。例如： "click" 、 "mousemove" 、 "keydown" 。 functionName 是你所创建的某个函数的名称。

var button = $("#theButton");

function thisIsAFunction() {

// 这里面的代码只会在按钮被点击时执行。

}

button.on("click", thisIsAFunction);

注意第二个参数 functionName ，其后没有跟 () 。因为这里不是 calling （调用）函数。这里仅仅是告诉 on() 函数，在正确的时候应该调用什么函数。

点击解法

// 请记住只有JavaScript进入

// 这将按钮的文字颜色设置为"blue"”。

var button = $("#theButton");

// 该按钮被点击时，该功能将运行。

function buttonClicked() {

// 这将按钮的文字颜色设置为"blue"”。

button.css("color", "blue");

// 使用.css（）设置按钮的 "background-color"

button.css("background-color", "blue");

}

// ".on()" ”用于将事件挂接到元素。

// 现在，按钮将运行按钮点击…

// ...在"click"时发挥作用。

button.on("click", buttonClicked);

/* 记住只有CSS规则放在&tSyt>标签内 */

body {

text-align:center;

}

#theButton {

width: 500px;

height: 125px;

font-size: 3em;

}

本攻略发于极客战记官方教学栏目，原文地址为：

https://codecombat.163.com/news/jikezhanji-dianji

极客战记——学编程，用玩的！

「网易官方」极客战记（codecombat）攻略-网页开发2-点击-clickthrough

标签：一个开发回调 bat text function cal 官方使用

原文地址：https://www.cnblogs.com/codecombat/p/12912583.html

上一篇：[Go] golang http下返回json数据

下一篇：transformjs 污染了 DOM？是你不了解它的强大

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：「网易官方」极客战记（codecombat）攻略-网页开发2-点击-clickthrough
文章链接：http://soscw.com/essay/58227.html

亲，登录后才可以留言！

「网易官方」极客战记（codecombat）攻略-网页开发2-点击-clickthrough

简介

默认代码

概览

事件

on(eventName, functionName)

点击解法

评论

热门文章

推荐文章

最新文章

置顶文章

「网易官方」极客战记（codecombat）攻略-网页开发2-点击-clickthrough

简介

默认代码

概览

事件

on(eventName, functionName)

点击 解法

评论

热门文章

推荐文章

最新文章

置顶文章

点击解法